我希望在未填写必填字段时不打开模式框

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

您可以通过在输入字段中添加“必需”属性来轻松完成。删除 data-toggle="modal" data-target="#exampleModal" data-backdrop="static" data-keyboard="false"。这些用于直接打开模态。您应该检查单击提交按钮上的表单。

<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;
});

在 modal 上填充数据后，您可以触发事件以进行 ajax 调用。我认为它有帮助。