Question

我正在联系我们表格。单击提交按钮后，我希望验证表单，例如，如果在移动号码字段中输入文本，我希望显示错误消息。如果表单中的所有数据类型都正确，我想要显示一个模态，谢谢。继承人代码：

<form class="form">
              <div class="line"><label  style="font-size: 18px;"for="fname">First Name *: </label><input type="text" id="fname" required /></div>
              <div class="line"><label for="lname">Last Name *: </label><input type="text" id="lname" required /></div>
              <!-- You may want to consider adding a "confirm" password box also -->

              <div class="line"><label for="email">Email *: </label><input type="email" id="email"required /></div>
              <!-- Valid input types: http://www.w3schools.com/html5/html5_form_input_types.asp -->
              <div class="line"><label for="tel">Mobile *: </label><input type="tel"pattern="[789][0-9]{9}" id="tel" required/></div>
              <div class="line"><label for="add">Address *: </label><input type="text" id="add" required/></div>
              <div class="line"><label for="ptc">Post Code *: </label><input type="number" maxlenght="6" id="ptc" required /></div>
              <div><button data-target="modal1" type="submit"class=" waves-effect waves-light btn modal-trigger">Submit<i class="material-icons right">send</i></button></div>

              <p>Note: Please make sure your details are correct before submitting form and that all fields marked with * are completed!.</p>
          </form>

下面是javascript

$(document).ready(function(){
// the "href" attribute of .modal-trigger must specify the modal ID that   wants to be triggered
$('.modal-trigger').leanModal();
});

这是模态结构。

<div id="modal1" class="modal">
<div class="modal-content">
<h4>Thank You</h4>
<p>Our Customer service team will contact you shortly</p>
</div>
<div class="modal-footer">
<a href="#!" class=" modal-action modal-close waves-effect waves-green   btn-flat">OK</a>
</div>
</div>

Answer 1

您的代码问题在于您正在处理错误的事件。我不知道你正在使用什么框架，但是你的按钮可能会在单击按钮时显示模态，而不是在提交表单时。最好注意表单的提交事件。

(function($){
        $(document).ready(function(){
        $('.form').on('submit', function(e){
            e.preventDefault();
            $('.modal-trigger').leanModal();//Show your modal?  
        });
      });

    })(jQuery);

这是我使用Twitter bootstrap准备的一个例子。我使用了你的表单和框架的模态。功能必须与您想要的功能非常相似。

(function($) {
  $(document).ready(function() {
    $('form.form').on('submit', function(e) { //Handle the submit event of the form
      e.preventDefault(); //This prevents the form from submitting, You might need to delete it in your actual code
      $('#myModal').modal('show'); //In bootstrap this is the function that shows the modal. It might differ on your actual code.	
    });
  });

})(jQuery);

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<form class="form">
  <div class="line">
    <label style="font-size: 18px;" for="fname">First Name *:</label>
    <input type="text" id="fname" required />
  </div>
  <div class="line">
    <label for="lname">Last Name *:</label>
    <input type="text" id="lname" required />
  </div>
  <!-- You may want to consider adding a "confirm" password box also -->

  <div class="line">
    <label for="email">Email *:</label>
    <input type="email" id="email" required />
  </div>
  <!-- Valid input types: http://www.w3schools.com/html5/html5_form_input_types.asp -->
  <div class="line">
    <label for="tel">Mobile *:</label>
    <input type="tel" pattern="[789][0-9]{9}" id="tel" required/>
  </div>
  <div class="line">
    <label for="add">Address *:</label>
    <input type="text" id="add" required/>
  </div>
  <div class="line">
    <label for="ptc">Post Code *:</label>
    <input type="number" maxlenght="6" id="ptc" required />
  </div>
  <div>
    <button type="submit" class=" waves-effect waves-light btn modal-trigger">Submit</button>
  </div>

  <p>Note: Please make sure your details are correct before submitting form and that all fields marked with * are completed!.</p>
</form>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        your modal
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

即使表单未经过验证，模式也会出现在表单提交上

1 个答案: