本文介绍了即使无效，表单仍然会被提交的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
< form class =form-containeronsubmit =return falseautocomplete =offnovalidate>
< fieldset>< h4 class =text-center font-weight-bold>个人信息< / h4>< / fieldset>
<！ - 重复和成功的警告 - >
< div class =form-group col-12 container>
< div class =alertid =alertMessagerole =alerthidden>
< h6 class =alert-headingid =alertHeading>< / h6>
< p id =sampleParagraphclass =text-center>< / p>
< a href =＃id =hrefText>< / a>
< / div>
< / div>
< div class =form-row>
< div class =form-group col-xs-12 col-md-4>
< label for =inputEmail4>名字< / label>
< input type =textclass =form-controlid =txtFirstnameplaceholder =pattern =。{3，}title =最少3个字符aria-describedby =inputGroupPrepend 必需>
< div class =invalid-feedback>
必填字段。
< / div>
< / div>
< div class =form-group col-xs-12 col-md-4>
< label for =inputPassword4>中间名< / label>
< input type =textclass =form-controlid =txtMiddlenameplaceholder =aria-describedby =inputGroupPrependrequired>
< div class =invalid-feedback>
必填字段。
< / div>
< / div>
< div class =form-group col-xs-12 col-md-4>
< label for =inputEmail4>姓氏< / label>
< input type =textclass =form-controlid =txtLastnameplaceholder =pattern =。{3，}title =最少3个字符aria-describedby =inputGroupPrepend 必需>
< div class =invalid-feedback>
必填字段。
< / div>
< / div>
< / div>
< div class =form-row>
< div class =form-group col-12 col-md-8>
< label for =inputAddress>地址< / label>
< input type =textclass =form-controlid =txtaddressplaceholder =aria-describedby =inputGroupPrependrequired>
< div class =invalid-feedback>
必填字段
< / div>
< / div>
< div class =form-group col-12 col-md-4>
< label for =inputAddress2> City< / label>
< input type =textclass =form-controlid =txtcityplaceholder =aria-describedby =inputGroupPrependrequired>
< div class =invalid-feedback>
必填字段
< / div>
< / div>
< / div>
< div class =form-row>
< div class =form-group col-12 col-md-4>
< label for =inputEmail4> Birthdate< / label>
< input type =textclass =form-controlid =txtbirthdayplaceholder =onkeypress =return false;所需>
<！ - < label id =lblerrorbdclass =text-centerstyle =color：red; font-size：smaller;>< / label> - >
< div class =invalid-feedback>
必填字段
< / div>
< div class =input-group-addon>
< span class =glyphicon glyphicon-calendar>< / span>
< / div>
< / div>
< div class =form-group col-12 col-md-4>
< label for =inputPassword4>移动电话号码< /标签>
< input type =textclass =form-controlid =txtmobilenumbermaxlength =11placeholder =value =09pattern =。{11，}title =请输入正确的手机号码onkeydown =return（！（event.keyCode> = 65）&& event.keyCode！= 32）; aria-describedby =inputGroupPrependrequired>
< div class =invalid-feedback>
无效号码。
< / div>
< / div>
< div class =form-group col-12 col-md-4>
< label for =inputEmail4>电话号码< / label>
< input type =textclass =form-controlid =txtphonenumbermaxlength =7placeholder =onkeydown =return（！（event.keyCode> = 65）&& ; event.keyCode！= 32）;咏叹调-describedby = inputGroupPrepend >
< / div>
< / div>
< h4 class =text-center font-weight-bold>帐户信息< / h4>
< div class =form-group col-12 col-md-8 center-block>
< label for =inputEmail4>电子邮件< / label>
< input type =emailclass =form-controlid =txtemailplaceholder =pattern =[a-z0-9 ._％+ - ] + @ [a-z0- 9 .-] + \。[az] {2，} $title =电子邮件必须格式正确aria-describedby =inputGroupPrependrequired>
< div class =invalid-feedbackid =emailRequired>
必填字段。
< / div>
< / div>
< div class =form-group col-12 col-md-8 center-block>
< label for =inputEmail4>密码< / label>
< input type =passwordclass =form-controlid =txtpasswordplaceholder =pattern =（？=。* \ d）（？=。* [az]）（ ？=。* [AZ]）。{8，}title =密码最少8个字符onchange ='check_pass（）;'aria-describedby =inputGroupPrependrequired>
< div class =invalid-feedbackid =passRequired>
必填字段
< / div>
< / div>
< div class =form-group col-12 col-md-8 center-block>
< label for =inputEmail4>确认密码< / label>
< input type =passwordclass =form-controlid =txtconfirmpasswordplaceholder =pattern =。{8，}title =密码最少8个字符style =margin ：0px auto; display：block; aria-describedby =inputGroupPrependrequired>
< div class =invalid-feedbackid =confirmRequired>
必填字段。
< / div>
< / div>
< div class =form-group col-md-4 center-block d-block>
< div id =recaptchastyle =text-align：center;>< / div>
< input type =hiddenclass =hiddenRecaptcha required float-sm-rightname =hiddenRecaptchaid =hiddenRecaptcha>
< div id =hiddenRecaptchaclass =g-recaptcha d-flex justify-content-centerdata-sitekey =6Le895kUAAAAAI0mfIUn2BiPTkbc-1aD1zt7L6UL>< / div>
< label id =lblerrorclass =d-flex justify-content-centerstyle =color：red; font-size：smaller;>< / label>
< / div>
< div class =form-row col-md-8 center-block d-block>
< button type =buttonclass =btn btn-primary float-right mx-1onclick =login（）;>取消< / button>
< button type =submitonsubmit =return falseid =newRegistrationclass =btn btn-primary float-right mx-1> Register< / button>
< / div>
< br class =clearfix/>
< br class =clearfix/>
< br class =clearfix/>
< br class =clearfix/>
< / form>
我的尝试：
这是我的javascript
（function（）{
'use strict';
window.addEventListener（'load'，function （）{
//获取我们要将自定义Bootstrap验证样式应用到
var forms = document.getElementsByClassName（'form-container'）的所有表单;
//循环遍历它们阻止提交
var validation = Array.prototype.filter.call（forms，function（form）{
form.addEventListener（'submit'，function（event）{
debugger;
$（＃txtpassword）。keydown（function（）{
var value = $（this）.val（）;
if（value.length == 0）{
$（＃passRequired）。html（必填字段）;
event.preventDefault（）;
event.stopPropagation（）;
}
else {
$（＃passRequired）。html（密码必须包含8个字符，数字和字母至少包含1个大写字母。）;
event.preventDefault（）;
event.stopPropagation（）;
}
}）;
$（＃txtconfirmpassword）。keydown（function（）{
var password = $（＃txtpassword）;
var confirmpassword = $（this）.val （）;
if（confirmpassword.length == 0）{
$（＃confirmRequired）。html（Required Field）;
event.preventDefault（）;
event.stopPropagation（）;
}
else if（password！= confirmpassword）{
$（＃confirmRequired）。html（密码不匹配）;
event.preventDefault（）;
event.stopPropagation（）;
}
}）;
$（＃txtemail）。keydown（function（）{
var value = $（this）.val（）;
if（value.length == 0） ）{
$（＃emailRequired）。html（必填字段）;
event.preventDefault（）;
event.stopPropagation（）;
}
else {
$（＃emailRequired）。html（无效的电子邮件）;
event.preventDefault（）;
event.stopPropagation（）;
}
}）;
if（form.checkValidity（）=== false）{
event.preventDefault（）;
event.stopPropagation（）;
}
form.classList.add（'was-validated'）;
}，false）;
}）;
}，false）;
}）（）; 解决方案
<form class="form-container" onsubmit="return false" autocomplete="off" novalidate>
<fieldset><h4 class ="text-center font-weight-bold ">Personal Information</h4></fieldset>
<!-- ALERT FOR DUPLICATE AND SUCCESS -->
<div class="form-group col-12 container">
<div class="alert" id="alertMessage" role="alert" hidden>
<h6 class="alert-heading" id="alertHeading"></h6>
<p id="sampleParagraph" class="text-center"></p>
<a href="#" id="hrefText"></a>
</div>
</div>
<div class="form-row">
<div class="form-group col-xs-12 col-md-4">
<label for="inputEmail4">First Name</label>
<input type="text" class="form-control" id="txtFirstname" placeholder="" pattern=".{3,}" title="3 characters minimum" aria-describedby="inputGroupPrepend" required>
<div class="invalid-feedback">
Required Field.
</div>
</div>
<div class="form-group col-xs-12 col-md-4">
<label for="inputPassword4">Middle Name</label>
<input type="text" class="form-control" id="txtMiddlename" placeholder="" aria-describedby="inputGroupPrepend" required>
<div class="invalid-feedback">
Required Field.
</div>
</div>
<div class="form-group col-xs-12 col-md-4">
<label for="inputEmail4">Last Name</label>
<input type="text" class="form-control" id="txtLastname" placeholder="" pattern=".{3,}" title="3 characters minimum" aria-describedby="inputGroupPrepend" required>
<div class="invalid-feedback">
Required Field.
</div>
</div>
</div>
<div class ="form-row">
<div class="form-group col-12 col-md-8">
<label for="inputAddress">Address</label>
<input type="text" class="form-control" id="txtaddress" placeholder="" aria-describedby="inputGroupPrepend" required>
<div class="invalid-feedback">
Required Field
</div>
</div>
<div class="form-group col-12 col-md-4">
<label for="inputAddress2">City</label>
<input type="text" class="form-control" id="txtcity" placeholder="" aria-describedby="inputGroupPrepend" required>
<div class="invalid-feedback">
Required Field
</div>
</div>
</div>
<div class="form-row">
<div class="form-group col-12 col-md-4">
<label for="inputEmail4">Birthdate</label>
<input type="text" class="form-control" id="txtbirthday" placeholder="" onkeypress="return false;" required>
<!--<label id ="lblerrorbd" class="text-center" style="color:red; font-size:smaller;"></label>-->
<div class="invalid-feedback">
Required Field
</div>
<div class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</div>
</div>
<div class="form-group col-12 col-md-4">
<label for="inputPassword4">Mobile Number</label>
<input type="text" class="form-control" id="txtmobilenumber" maxlength="11" placeholder="" value="09" pattern=".{11,}" title="Please input correct mobile number" onkeydown = "return (!(event.keyCode>=65) && event.keyCode!=32);" aria-describedby="inputGroupPrepend" required>
<div class="invalid-feedback">
Invalid Number.
</div>
</div>
<div class="form-group col-12 col-md-4">
<label for="inputEmail4">Phone Number</label>
<input type="text" class="form-control" id="txtphonenumber" maxlength="7" placeholder="" onkeydown = "return (!(event.keyCode>=65) && event.keyCode!=32);" aria-describedby="inputGroupPrepend">
</div>
</div>
<h4 class ="text-center font-weight-bold">Account Information</h4>
<div class="form-group col-12 col-md-8 center-block">
<label for="inputEmail4">Email</label>
<input type="email" class="form-control" id="txtemail" placeholder="" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$" title="email must be in correct format" aria-describedby="inputGroupPrepend" required>
<div class="invalid-feedback" id="emailRequired">
Required Field.
</div>
</div>
<div class="form-group col-12 col-md-8 center-block">
<label for="inputEmail4">Password</label>
<input type="password" class="form-control" id="txtpassword" placeholder="" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" title="Password minimum of 8 characters" onchange='check_pass();' aria-describedby="inputGroupPrepend" required>
<div class="invalid-feedback" id="passRequired">
Required Field
</div>
</div>
<div class="form-group col-12 col-md-8 center-block">
<label for="inputEmail4">Confirm Password</label>
<input type="password" class="form-control" id="txtconfirmpassword" placeholder="" pattern=".{8,}" title="Password minimum of 8 characters" style="margin:0px auto; display:block;" aria-describedby="inputGroupPrepend" required>
<div class="invalid-feedback" id="confirmRequired">
Required Field.
</div>
</div>
<div class="form-group col-md-4 center-block d-block">
<div id="recaptcha" style="text-align:center;"></div>
<input type="hidden" class="hiddenRecaptcha required float-sm-right" name="hiddenRecaptcha" id="hiddenRecaptcha">
<div id="hiddenRecaptcha" class="g-recaptcha d-flex justify-content-center" data-sitekey="6Le895kUAAAAAI0mfIUn2BiPTkbc-1aD1zt7L6UL"></div>
<label id="lblerror" class="d-flex justify-content-center" style="color: red; font-size: smaller;"></label>
</div>
<div class="form-row col-md-8 center-block d-block">
<button type="button" class="btn btn-primary float-right mx-1" onclick="login();">Cancel</button>
<button type="submit" onsubmit="return false" id="newRegistration" class="btn btn-primary float-right mx-1">Register</button>
</div>
<br class ="clearfix"/>
<br class ="clearfix"/>
<br class ="clearfix"/>
<br class ="clearfix"/>
</form>
What I have tried:
Here is my javascript
(function () {
'use strict';
window.addEventListener('load', function () {
// Fetch all the forms we want to apply custom Bootstrap validation styles to
var forms = document.getElementsByClassName('form-container');
// Loop over them and prevent submission
var validation = Array.prototype.filter.call(forms, function (form) {
form.addEventListener('submit', function (event) {
debugger;
$("#txtpassword").keydown(function () {
var value = $(this).val();
if (value.length == 0) {
$("#passRequired").html("Required Field");
event.preventDefault();
event.stopPropagation();
}
else {
$("#passRequired").html("Password must contain 8 characters with numbers and letters with at least 1 upper case character.");
event.preventDefault();
event.stopPropagation();
}
});
$("#txtconfirmpassword").keydown(function () {
var password = $("#txtpassword");
var confirmpassword = $(this).val();
if (confirmpassword.length == 0) {
$("#confirmRequired").html("Required Field");
event.preventDefault();
event.stopPropagation();
}
else if (password != confirmpassword) {
$("#confirmRequired").html("Password doesn't match");
event.preventDefault();
event.stopPropagation();
}
});
$("#txtemail").keydown(function () {
var value = $(this).val();
if (value.length == 0) {
$("#emailRequired").html("Required Field");
event.preventDefault();
event.stopPropagation();
}
else {
$("#emailRequired").html("Invalid Email");
event.preventDefault();
event.stopPropagation();
}
});
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
});
}, false);
})(); 解决方案
这篇关于即使无效，表单仍然会被提交的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！