2016-11-07 135 views
0

我是jquery的新手。我试图将表单验证放入引导模式框中。表单验证在点击发送消息按钮时不起作用。不知道什么问题。我会给下面的小提琴链接。提前致谢。Jquery表单验证不与引导模式工作

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

+0

你拨弄需要加载验证插件,也jQuery的。更新:https://jsfiddle.net/okdcv0s6/1/ –

+0

而这些消息不对应您的表单,但默认消息正在显示。例如尝试使用无效的电子邮件。 –

+0

我已经加载了这个插件。但仍然有同样的结果 –

回答

0

请包括链接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>