Problem Description
At that time, I was completing the submission of the added form through jquery's ajax. Before submitting, I needed to make some simple non-empty judgments on the form. Therefore, a click event click is bound to the submit button to initiate a $.post request. However, when an empty field is entered, the form is still submitted to the background server, obviously the result is not what I want.
</>
I created a signup form and set its input field as require attribute, but it doesn't work with ajax
<div class="form-group">
<input required type="text" id="First_name" placeholder="Enter your First Name" value="" class="form-control login-field">
<i class="fa fa-user login-field-icon"></i>
</div>
<div class="form-group">
<input required type="text" id="last_name" placeholder="Enter your Last Name" value="" class="form-control login-field">
<i class="fa fa-user login-field-icon"></i>
</div>
<div class="form-group">
<input required type="text" id="reg_username" placeholder="Enter your User Name " value="" class="form-control login-field">
<i class="fa fa-user login-field-icon"></i>
</div>
<div class="form-group">
<input required type="email" id="email" placeholder="Enter your Email" value="" class="form-control login-field">
<i class="fa fa-user login-field-icon"></i>
</div>
<div class="form-group">
<input required type="password" id="password" placeholder="Password" value="" class="form-control login-field">
<i class="fa fa-lock login-field-icon"></i>
</div>
<a id="register" class="btn btn-success modal-login-btn">Sign up</button>
Here is the ajax code
<script type="text/javascript">
$(document).ready(function(){
$("#register").click(function(e){
if($("form").valid()){
e.preventDefault();
}
var firstname=$('#First_name').val();
var lastname=$('#last_name').val();
var username=$('#reg_username').val();
var password=$('#password').val();
var email=$('#email').val();
$.ajax({
type: "POST",
url: "doRegister.php",
data:
"first_name=" +firstname+ "&last_name=" +lastname+ "&username="+ username+ "&password="+ password+ "&email="+ email ,
success: function(html){
document.write(html);
}
});
return false;
});
});
</script>
Cause Analysis:
Since click is only bound to a simple click event, every click will execute the operation of submitting the form, and it does not determine whether to submit according to the verification results of the fields in the form.
solution:
In order to validate html5 required fields need to use submit event instead of click. The submit event is only fired after successful authentication.
$(document).ready(function() {
$("#register").submit(function(e) {
//---------------^---------------
e.preventDefault();
var firstname = $('#First_name').val(),
lastname = $('#last_name').val(),
username = $('#reg_username').val(),
password = $('#password').val(),
email = $('#email').val();
$.ajax({
type: "POST",
url: "doRegister.php",
data: "first_name=" + firstname + "&last_name=" + lastname + "&username=" + username + "&password=" + password + "&email=" + email,
success: function(html) {
console.log(html);
}
});
return false;
});
});