我正在使用带有CodeIgniter的jquery验证插件，出于某种原因，jquery在注册页面上的验证之前仅为移动设备提交。登录页面使用相同的代码完美地工作。我在这里附上了代码。
注册-validation.js
$(document).ready(function() {
$.validator.setDefaults({
errorClass: 'text-danger',
highlight: function(element) {
$(element)
.closest('.form-group')
.addClass('has-error');
},
unhighlight: function(element) {
$(element)
.closest('.form-group')
.removeClass('has-error')
.addClass('has-success');
},
errorPlacement: function(error, element) {
if (element.attr("type") === "checkbox") {
error.appendTo(element.parent().parent());
} else {
error.insertAfter(element);
}
}
});
$.validator.addMethod('strongPassword', function(value, element) {
return this.optional(element) ||
value.length >= 8 &&
/\d/.test(value) &&
/[a-z]/i.test(value);
}, 'Your password must be 8 characters long and contain atleast one number and character ')
$("#form-register").validate({
submitHandler: function(form) {
$.ajax({
url: base_url + 'users/register',
type: "POST",
data: $(form).serialize(),
dataType: "JSON",
beforeSend: function() {
$(window).scrollTop(0);
$("#show-progress").addClass('progress');
},
success: function(feedback) {
if (feedback['error'] == "success") {
window.location.href = feedback.message;
}
}
});
},
rules: {
fname: {
required: true,
lettersonly: true
},
lname: {
required: true,
lettersonly: true
},
email: {
required: true,
email: true,
remote: {
url: base_url + 'users/checkEmailExists',
type: "post"
}
},
dob: {
required: true
},
username: {
required: true,
alphanumeric: true,
minlength: 6,
remote: {
url: base_url + 'users/checkUsernameExists',
type: "post"
}
},
mobile: {
required: true,
minlength: 10,
maxlength: 10,
number: true,
remote: {
url: base_url + 'users/checkMobileExists',
type: "post"
}
},
password: {
required: true,
minlength: 8,
strongPassword: true
},
confirm_password: {
required: true,
equalTo: "#password"
},
terms: {
required: true
}
},
messages: {
fname : {
lettersonly: 'Enter a valid name'
},
lname : {
lettersonly: 'Enter a valid name'
},
email: {
email: 'Please enter a valid email address',
remote: $.validator.format("{0} is associated with an account, choose a different email")
},
terms: {
required: 'Agree to the terms of use'
},
mobile: {
minlength: 'Enter a valid mobile number eg: 07XXXXXXXX',
maxlength: 'Enter a valid mobile number eg: 07XXXXXXXX',
remote: $.validator.format("{0} is associated with an account, choose a different mobile")
},
username: {
alphanumeric: 'Username can only contain letters, numbers and underscore',
remote: $.validator.format("{0} is already taken, choose a different username")
}
}
});
});
Register.php
<!-- –––––––––––––––[ PAGE CONTENT ]––––––––––––––– -->
<main id="mainContent" class="main-content">
<div class="page-container ptb-60">
<?php echo validation_errors(); ?>
<div class="container">
<div id="show-progress"></div>
<section class="panel p-40">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<h2 class="h3 mb-20 h-title">Register New Profile <small>Or <a href="<?php echo base_url()?>users/login" class="color-green">Log in</a></small></h2>
<?php echo form_open('users/register', 'class="p-40" id="form-register"');?>
<div class="form-group">
<label>First Name</label>
<input type="text" class="form-control input-lg" name="fname" id="fname">
</div>
<div class="form-group">
<label>Last Name</label>
<input type="text" class="form-control input-lg" name="lname" id="lname">
</div>
<div class="form-group">
<label>Email</label>
<input type="text" class="form-control input-lg" id="email" name="email" id="email">
</div>
<div class="form-group">
<label >Mobile</label>
<input type="number" class="form-control input-lg" name="mobile" id="mobile">
</div>
<div class="form-group">
<label >Date of Birth</label>
<input id="dob" class="form-control input-lg" type="text" name="dob" style="background-color:#fff;" data-altinput="true" data-altFormat="F j, Y">
</div>
<div class="form-group">
<label >Gender</label>
<div class="custom-radio">
<input type="radio" name="gender" id="gender1" value="M" checked><label class="color-mid" for="gender1">Male</label>
</div>
<div class="custom-radio">
<input type="radio" name="gender" id="gender2" value="F"><label class="color-mid" for="gender2">Female</label>
</div>
</div>
<div class="form-group">
<label>Username</label>
<input type="text" class="form-control input-lg" name="username" id="username">
</div>
<div class="form-group">
<label >Password</label>
<input type="password" class="form-control input-lg" name="password" id="password">
</div>
<div class="form-group">
<label >Confirm Password</label>
<input type="password" class="form-control input-lg" name="confirm_password" id="password-confirm">
</div>
<div class="form-group">
<div class="custom-checkbox mb-20">
<input type="checkbox" id="agree_terms" name="terms">
<label class="color-mid terms" for="agree_terms">I agree to the <a href="<?php echo base_url()?>terms" class="color-green">Terms of Use</a> and <a href="<?php echo base_url()?>privacy" class="color-green">Privacy Statement</a>.</label>
</div>
</div>
<button type="submit" class="btn btn-block btn-lg" id="btn-register">Register</button>
<?php echo form_close(); ?>
</div>
</div>
</section>
</div>
</div>
</main>
<!--–––––––––––––––[ END PAGE CONTENT ]–––––––––––––––-->
表单在移动视图中提交。但是当我尝试在字段中键入任何内容时，验证工作，如果我单击提交按钮而未完全验证，则表单将被提交。请帮忙！