【发布时间】：2021-02-23 12:57:29
【问题描述】：
我需要帮助，因为我使用 jQuery 来验证 2 个表单，对于第一个表单，这个 jQuery 运行良好，但对于第二个表单，它不起作用，因为它一直提交空白空间。这是我的 jQuery 代码
(function ($) {
"use strict";
/*==================================================================
[ Validate ]*/
var input = $('.validate-input .input100');
// var input2 = $('.validate-angkatan .input100');
$('.validate-form').on('submit',function(){
var check = true;
for(var i=0; i<input.length; i++) {
if(validate(input[i]) == false){
showValidate(input[i]);
check=false;
}
}
return check;
});
$('.validate-form .input100').each(function(){
$(this).focus(function(){
hideValidate(this);
});
});
function validate (input) {
if($(input).attr('type') == 'email' || $(input).attr('name') == 'email') {
if($(input).val().trim().match(/^([a-zA-Z0-9_\-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([a-zA-Z0-9\-]+\.)+))([a-zA-Z]{1,5}|[0-9]{1,3})(\]?)$/) == null) {
return false;
}
}
else {
if($(input).val().trim() == ''){
return false;
}
}
}
function showValidate(input) {
var thisAlert = $(input).parent();
$(thisAlert).addClass('alert-validate');
}
function hideValidate(input) {
var thisAlert = $(input).parent();
$(thisAlert).removeClass('alert-validate');
}
})(jQuery);
这是第一个与上述验证完美配合的表单
<form class="login100-form validate-form ml-5" action="/DatabaseAlumni/login/auth" method="post">
<span class="login100-form-title">
Login Alumni
</span>
<div class="wrap-input100 validate-input" data-validate="Valid email is required: ex@abc.xyz">
<input class="input100" type="text" name="email" placeholder="Email">
<span class="focus-input100"></span>
<span class="symbol-input100">
<i class="fa fa-envelope" aria-hidden="true"></i>
</span>
</div>
<div class="wrap-input100 validate-input" data-validate="Password is required">
<input class="input100" type="password" name="pass" placeholder="Password">
<span class="focus-input100"></span>
<span class="symbol-input100">
<i class="fa fa-lock" aria-hidden="true"></i>
</span>
</div>
<div class="container-login100-form-btn">
<button class="login100-form-btn">
Login
</button>
</div>
<div class="text-center p-t-12">
<span class="txt1">
Lupa
</span>
<a class="txt2" href="#">
Password?
</a>
</div>
<div class="text-center p-t-136">
<a class="txt2" href="/DatabaseAlumni/register">
Buat Akun
<i class="fa fa-long-arrow-right m-l-5" aria-hidden="true"></i>
</a>
</div>
</form>
这是第二个表单，一直在提交空格
<form class="login100-form validate-form ml-5" action="/DatabaseAlumni/register/createacc" method="post">
<span class="login100-form-title">
Daftar Akun
</span>
<div class="row">
<div class="col-md-6">
<div class="wrap-input100 validate-input" data-validate="Isi NPM">
<input class="input100" type="text" name="npm" placeholder="NPM">
<span class="focus-input100"></span>
<span class="symbol-input100">
<i class="fa fa-address-card" aria-hidden="true"></i>
</span>
</div>
<div class="wrap-input100 validate-input" data-validate="Isi dengan nama lengkap">
<input class="input100" type="text" name="nama" placeholder="Nama Lengkap">
<span class="focus-input100"></span>
<span class="symbol-input100">
<i class="fa fa-user" aria-hidden="true"></i>
</span>
</div>
<div class="wrap-input100 validate-input" data-validate="Isi dengan angkatan">
<?php $a = date("Y"); ?>
<input class="input100" type="number" name="angkatan" placeholder="Angkatan" min="1960" max=<?= $a - 4; ?>>
<span class="focus-input100"></span>
<span class="symbol-input100">
<i class="fa fa-user" aria-hidden="true"></i>
</span>
</div>
<!-- <div class="wrap-input100 validate-angkatan" data-validate="Isi dengan angkatan">
<input class="input100" type="text" name="nama" id="angkatan" placeholder="Angkatan" autocomplete="off">
<span class="focus-input100"></span>
<span class="symbol-input100">
<i class="fa fa-users" aria-hidden="true"></i>
</span>
</div> -->
<div class="wrap-input100">
<div class="row mt-4 ml-4">
<div class="col-md-4">
<input type="radio" id="male" name="gender" value="Laki-laki">
<label class="ml-1" for="male">Laki-laki</label><br>
</div>
<div class="col-md-5">
<input type="radio" id="female" name="gender" value="Perempuan">
<label class="ml-1" for="female">Perempuan</label><br>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="wrap-input100 validate-input" data-validate="Masukkan Email dengan benar">
<input class="input100" type="email" name="email" placeholder="Email">
<span class="focus-input100"></span>
<span class="symbol-input100">
<i class="fa fa-envelope" aria-hidden="true"></i>
</span>
</div>
<div class="wrap-input100 validate-input" data-validate="Password Wajib Diisi">
<input id="password" class="input100" type="password" name="pw" placeholder="Password" onkeyup="check();">
<span class="focus-input100"></span>
<span class="symbol-input100">
<i class="fa fa-lock" aria-hidden="true"></i>
</span>
</div>
<div class="wrap-input100 validate-input" data-validate="Masukkan kembali Password">
<input id="confirm_password" class="input100" type="password" name="pw2" placeholder="Konfirmasi Password" onkeyup="check();">
<label><span id="message"></span></label>
</div>
</div>
</div>
<div class="container-login100-form-btn">
<button type="submit" class="login100-form-btn">
Daftar
</button>
</div>
<div class="text-center p-t-136">
<a class="txt2" href="/DatabaseAlumni/login">
Sudah memiliki akun? Masuk
<i class="fa fa-long-arrow-right m-l-5" aria-hidden="true"></i>
</a>
</div>
</form>
我尝试在浏览器的调试功能中暂停断点并设置断点
check=false;
在 jQuery.当我尝试使用空输入提交第一个表单时，我暂停了。但是对于第二种形式，我什么也没得到。我不明白，因为我对两种表单都使用了相同的结构，包括类和 div。
【问题讨论】：
-
您的第二个表单是在页面加载后动态创建的吗（例如通过 ajax 调用或在模式对话框中）？你可以试试：
$(document).on('submit', '.validate-form', function() -
两个表单是否在同一个页面上？还是在不同的页面上？如果在不同的页面上仔细检查你是否包含了 .js。是否有任何控制台错误？
-
对电子邮件和年份使用适当的输入类型，并使用所需的属性。好教程：web.dev/sign-in-form-best-practices - 密码确认也很痛苦，让浏览器自动提示一个强密码
标签： javascript php html jquery validation