Jquery表单验证不使用bootstrap模式

Question

我是jquery的新手。我尝试将表单验证转换为bootstrap模式框。单击“发送消息”按钮时，表单验证无效。不知道是什么问题。我将在下面给出小提琴链接。提前谢谢。

$(function() {
  jQuery("#newsletterform").validate({
    rules: {
      firstname: {
        required: true
      },
      lastname: {
        required: true
      },
      phone: {
        required: true
      },
      email: {
        required: true,
        email: true
      },
      message: {
        required: true,
      }
    },
    messages: {
      s_up_email_name: {
        required: "username is required",
        remote: "Username already Exists"
      },
      s_up_email_add: {
        required: "Email is required",
        email: "Invalid email address",
        remote: "Email ID already Exists"
      },
      s_up_pwd: {
        required: "password is required",
        minlength: "Enter atleast 6 characters"
      }
    }
  });
});

<div class="modal fade" id="myModal" role="dialog">
  <div class="modal-dialog modal-lg">

    <!-- Modal content-->
    <div class="modal-content">
      <button type="button" class="close" data-dismiss="modal">&times;</button>

      <div class="modal-header">
        <h4 class="modal-title">contact us</h4>
      </div>
      <div class="modal-body">

        <form name="registration" action="" id="newsletterform" method="post">


          <div>
            <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 frst_name">
              <input type="text" class="box_txt" name="firstname" id="firstname" placeholder="FIRST NAME">
            </div>
            <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 last_name">
              <input type="text" class="box_txt" name="lastname" id="lastname" placeholder="LAST NAME">
            </div>
          </div>
          <div>
            <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 email">
              <input type="text" class="box_txt" name="email" id="email" placeholder="EMAIL">
            </div>
            <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 phone">
              <input type="text" class="box_txt" id="phone" name="phone" placeholder="PHONE" onkeypress="return isNumber(event)">
            </div>
          </div>
          <div>
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 message">
              <!--<input type="text" class="box_txt" value="MESSAGE">-->
              <textarea name="message" id="message" class="box_txt textarea" rows="8" cols="70">MESSAGE</textarea>
            </div>
          </div>
        </form>

      </div>
      <div class="modal-footer">
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
          <!--<button type="submit">Register</button>-->
          <input type="submit" class="btn btn_message" value="send message">
        </div>
      </div>
    </div>

  </div>
</div>

这是fiddle

Answer 1

请包含链接here和使用此：

<div class="modal fade" id="myModal" role="dialog">

        <div class="modal-dialog modal-lg">
            <form name="registration" action="" id="newsletterform" method="post">
                <!-- Modal content-->
                <div class="modal-content">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>

                    <div class="modal-header">
                        <h4 class="modal-title">contact us</h4>
                    </div>
                    <div class="modal-body">

                        <div>
                            <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 frst_name">
                                <input type="text" class="box_txt" name="firstname" id="firstname" placeholder="FIRST NAME">
                            </div>
                            <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 last_name">
                                <input type="text" class="box_txt" name="lastname" id="lastname" placeholder="LAST NAME">
                            </div>
                        </div>
                        <div>
                            <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 email">
                                <input type="text" class="box_txt" name="email" id="email" placeholder="EMAIL">
                            </div>
                            <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 phone">
                                <input type="text" class="box_txt" id="phone" name="phone" placeholder="PHONE" onkeypress="return isNumber(event)">
                            </div>
                        </div>
                        <div>
                            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 message">
                                <!--<input type="text" class="box_txt" value="MESSAGE">-->
                                <textarea name="message" id="message" class="box_txt textarea" rows="8" cols="70">MESSAGE</textarea>
                            </div>
                        </div>


                    </div>
                    <div class="modal-footer">
                        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                            <!--<button type="submit">Register</button>-->
                            <input type="submit" class="btn btn_message" value="send message">
                        </div>
                    </div>
                </div>
            </form>
        </div>

    </div>