JQuery event.preventdefault and php
I have a question concerning event.preventdefault. I used it on my client side validation just to make sure a username and password were filled in. However when I pressed the submit button and passed the validation on to php I got nothing. I mean when I checked if the form was submitted and did an echo to check I got nothing. But when I did (!isset($_POST['whatever']) I got something. Same goes for check if the fields were empty. I got nothing when I did empty, but got something when I did !empty
Jquery/html code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="css/verneyCustom.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container">
<!-- cms login form -->
<form action="login.php" method="POST" class="form-signin" id="cms-signin">
<h2 class="form-signin-heading">Please sign in</h2>
<span class="text-center" id="jsError"></span><!-- display client side errors -->
<input type="text" class="form-control" id="username" placeholder="Username" autofocus><br/>
<input type="password" class="form-control" id="password" placeholder="Password"><br/>
<input type="submit" class="btn btn-lg btn-primary btn-block" id="loginToSystem" value="Sign In">
</form>
</div>
<!-- include jquery v1.10.2 library to validate client side -->
<script src="js/jquery.js"></script>
<script>
//if the form is submitted check if values are ok
$("#cms-signin").submit(function(event){
if($('#username').val() == "" || $('#password').val() == ""){
event.preventDefault();
$("#jsError").html('You must fill in the form.');
}else if($('#username').val() == ""){
event.preventDefault();
$("#jsError").html('Username is required.');
}else if($('#password').val() == ""){
event.preventDefault();
$("#jsError").html('Password is required.');
}
});
</script>
</body>
</html>
php code
<?php
//include the connection to the cms database
require_once($_SERVER['DOCUMENT_ROOT'].'/vcm/_cms/resources/database_connect.php');
//check if the form was sent
if(isset($_POST['loginToSystem'])){
echo 'o';
//create an array for errors
$errors = array();
//check if the username and password fields are empty
//yes we did a check if jquery on the front but some people disable javascript
if(empty($_POST['username']) || empty($_POST['password'])){
echo 'empty';
}else{
echo 'ok';
}
}
echo'p';
?>
So basically it echo's 'p' no matter what, but will only echo 'o' if isset is changed to !isset. It will echo empty when left as is, and ok when changed to !empty
as adeneo explained you must add name
<form action="login.php" method="POST" class="form-signin" id="cms-signin">
<h2 class="form-signin-heading">Please sign in</h2>
<span class="text-center" id="jsError"></span><!-- display client side errors -->
<input type="text" class="form-control" name="username" id="username" placeholder="Username" autofocus><br/>
<input type="password" class="form-control" name="password" id="password" placeholder="Password"><br/>
<input type="submit" class="btn btn-lg btn-primary btn-block" id="loginToSystem" value="Sign In">
</form>
also you need && not ||
$("#cms-signin").submit(function(event){
if($('#username').val() == "" && $('#password').val() == ""){
event.preventDefault();
$("#jsError").html('You must fill all fields.');
}
});
上一篇: 从使用jquery隐藏的表单发布数据