我的页面上有表单验证。如果某个字段不存在,则模式框不应打开。如果填写了所有必填字段,则打开模型。
我的代码:
<form class="well form-horizontal" id="contact_form" autocomplete="off">
<fieldset>
<legend><center><h2><b>Registration Form</b></h2></center></legend><br>
<div class="form-group">
<label class="col-md-4 pd-r control-label">firstname</label>
<div class="col-md-4 pd-r inputGroupContainer">
<div class="input-group">
<input name="first_name" id="first_name" class="form-control tboxs" type="text">
</div>
</div>
</div>
<div class="form-group">
<label class="col-md-4 pd-r control-label">city</label>
<div class="col-md-4 pd-r inputGroupContainer">
<div class="input-group">
<input name="city" id="city" placeholder="Solapur" class="form-control tboxs" value="Solapur" type="text" readonly>
</div>
</div>
</div>
<div class="form-group">
<label class="col-md-4 pd-r control-label">village</label>
<div class="col-md-4 pd-r inputGroupContainer">
<div class="input-group">
<input name="village" id="village" class="form-control tboxs" type="text">
</div>
</div>
</div>
<div class="form-group">
<label class="col-md-4 pd-r control-label"></label>
<div class="col-md-4 pd-r"><br>
<button type="submit" value="submit" class="btn-theme-colored btn" data-toggle="modal" data-target="#exampleModal" data-backdrop="static" data-keyboard="false">SUBMIT <span class="glyphicon glyphicon-send"></span></button>
</div>
</div>
</fieldset>
</form>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel"><font color="black"><strong>Verify OTP</strong></h5>
</div>
<div class="modal-body">
<form method="POST" id="otp_form" action="">
<div class="row">
<div class="col-sm-12 form-group">
<input type="text" class="form-control tboxs" id="otp_data" name="otp_data" placeholder="Enter OTP" maxlength="4" required="">
</div>
</div>
<div class="row">
<div class="col-sm-12 form-group">
<button type="submit" name="verifyotp" class="btn btn-lg btn-info btn-block">Verify</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
脚本:
<script>
$("#contact_form").validate(
{
rules:{
"first_name":{
required: true,
minlength: 4
},
"city":{
required: true,
},
"village":{
required: true,
},
},
messages:{
"first_name":{
required: "The name field is mandatory!",
minlength: "Choose a username of at least 4 letters!",
},
"village":{
required: "The name field is mandatory!",
},
"city":{
required: "The name field is mandatory!",
},
},
submitHandler: function(form) {
$.ajax({
url: "<?php echo base_url(); ?>MainController/userRegistration",
type: "post",
data: $('#contact_form').serialize(),
dataType:'json',
}).done(function( data ) {
console.log(data);
if(data.status=="true"){
alert('Verify Your Otp ');
setTimeout(function(){location.reload();},5000);
}else{
// alert("Try Again");
}
});
}
});
</script>
当前,它会打开模式框,而不检查必填字段。如果填写所有必填字段,则打开模式框。请为此提供帮助,我不知道我的代码在哪里错了。
Put required
属性应使用的输入。然后在您的JavaScript中:
const form = document.getElementById('contact_form');
if(form.reportValidity()) {
const formData = $(form).serialize();
}