[英]Jquery Validation not working on form without label
我有這樣的輸入表單:
<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驗證代碼:
$("#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",
},
},
});
我不知道為什么它不起作用,是因為不使用標簽或其他東西嗎? 因為我之前在帶有標簽的表單上使用了相同的腳本,所以它可以正常工作。 那么什么導致驗證無法進行?
您不需要對按鈕單擊進行驗證,因此可以在驗證器中添加提交:
$(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"
});
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.