我希望当必填字段未填充时，模态框不打开

Question

>我的页面上有表单验证。如果某些字段没有字段，则不应打开模式框。如果所有必填字段都已填写，则模型打开。

我的代码：

<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>

目前，它会打开模态框而不选中必填字段。如果所有必填字段都已填满，则打开模式框。 请帮助我解决这个问题，我不知道我的代码哪里错了。

Answer 1

将属性放在应该使用它们的输入上required。然后在你的 JavaScript 中：

const form = document.getElementById('contact_form');
if(form.reportValidity()) {
// Execute your modal code somewhere in here
// Get your form data by wrapping the form element in jQuery
const formData = $(form).serialize();
}

编辑：

如果您想自己处理错误，您应该在表单上使用novalidate

<form class="well form-horizontal"   id="contact_form" autocomplete="off" novalidate>

然后

const isValid = form.checkValidity() // returns true or false
const formData = new FormData(form);
const validationMessages = Array
.from(formData.keys())
.reduce((acc, key) => {
acc[key] = form.elements[key].validationMessage
return acc
}, {});

代码取自 https://itnext.io/back-to-the-browser-form-validation-d32dd01802c0

Answer 2

通过将"必需"属性添加到输入字段，您可以轻松完成。删除数据切换="模态" 数据目标="#exampleModal" 数据背景="静态" 数据键盘="假"。这些用于直接打开模态。您应该在单击提交按钮时检查表单。

<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" minlength="4" required>
</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 required>
</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" required>
</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">SUBMIT <span class="glyphicon glyphicon-send"></span></button>
</div>
</div>
</fieldset>
</form>

Jquery部分：

$('#submit').click(function(){
if($('#first_name').val()==''){
alert('Name can not be left blank and atleast 4 char long');
return false;
}
if($('#city').val() == ''){
alert('City can not be left blank');
return false;
}
if($('#village').val() == ''){
alert('village can not be left blank');
return false;
}
$('#exampleModal').modal('show');
return true;
});

在模态上填写数据后，您可以触发事件以进行 ajax 调用。我认为这有帮助。