jQuery验证不适用于没有标签的表单 [英] Jquery Validation not working on form without label
本文介绍了jQuery验证不适用于没有标签的表单的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有一个这样的输入表单:
I have an input form like this:
<form class="login-form" action="/accounts/authenticate" method="post" id="login_form" name="login_form">
<input type="hidden" name="{{ csrf_name }}" value="{{ csrf_hash }}" />
<div class="card mb-0">
<div class="card-body">
<div class="text-center mb-3">
<i class="icon-reading icon-2x text-slate-300 border-slate-300 border-3 rounded-round p-3 mb-3 mt-1"></i>
<h5 class="mb-0">Login to your account</h5>
<span class="d-block text-muted">Your credentials</span>
</div>
<div class="form-group form-group-feedback form-group-feedback-left">
<input type="email" id="email" name="email" class="form-control" placeholder="email">
<div class="form-control-feedback">
<i class="icon-user text-muted"></i>
</div>
</div>
<div class="form-group form-group-feedback form-group-feedback-left">
<input type="password" id="password" name="password" class="form-control" placeholder="Password">
<div class="form-control-feedback">
<i class="icon-lock2 text-muted"></i>
</div>
</div>
<div class="form-group d-flex align-items-center">
<div class="form-check mb-0">
<label class="form-check-label">
<input type="checkbox" name="remember" class="form-input-styled" checked data-fouc>
Remember
</label>
</div>
<a href="/accounts/recover" class="ml-auto">Forgot password?</a>
</div>
<div class="form-group">
<button type="submit" id="login_button" class="btn btn-primary btn-block">Sign in
<i class="icon-circle-right2 ml-2"></i></button>
</div>
<span class="form-text text-center text-muted">By continuing, you're confirming that you've read our <a href="#">Terms & Conditions</a> and <a href="#">Cookie Policy</a></span>
</div>
</div>
</form>
这是我的jquery验证代码:
and here's my jquery validation code:
$("#login_form").validate({
rules: {
email: {
required: true,
email: true,
},
password: {
required: true,
minlength: 12,
},
},
messages: {
email: {
required: "Please enter valid email",
email: "Please enter valid email",
},
},
});
我不知道为什么它不起作用,是因为不使用标签或其他东西吗?因为我之前在带有标签的表单上使用了相同的脚本,所以它可以正常工作.那么什么导致验证无法正常进行呢?
I don't know why its not working, is it because not using label or something? because i'm using this same scripts on a form with label before and it's working. so what can cause the validation not working?
推荐答案
您没有对单击按钮进行验证,因此可以在验证器中添加提交:
You aren't validating on the button click so you can add your submit in your validator:
$(document).ready(function() {
$('#success_alert').hide();
let csrf_test_name = $("input[name=csrf_test_name]").val();
$("#login_form").validate({
rules: {
email: {
required: true,
email: true,
},
password: {
required: true,
minlength: 12,
},
messages: {
email: {
required: "Please enter valid email",
email: "Please enter valid email",
},
password: {
required: "Please enter a valid password"
},
},
success: {
function(){
let btn = $(this);
btn.html('please wait.. ');
var email = $("input[name='email']").val();
var password = $("input[name='password']").val();
var remember = $("input[name='remember']").val();
$.ajax({
url: $(this).closest('form').attr('action'),
type:$(this).closest('form').attr('method'),
dataType: "json",
data: {email:email, password:password, remember:remember, 'csrf_test_name' : csrf_test_name
},
success: function(data) {
if(data.type == 'success'){
$('#success_alert').show();
btn.html('Login Success!');
}else{
Swal.fire({
type: 'error',
title: 'Oops...',
html: data.text,
});
btn.html('Register');
}
}
});
}
}
});
// just for the demos, avoids form submit
jQuery.validator.setDefaults({
debug: true,
success: "valid"
});
});
https://jsfiddle.net/cbfyhz5m/
这篇关于jQuery验证不适用于没有标签的表单的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文