点击提交验证不起作用：jquery

我知道JQuery，我想验证一个简单的表单开始。点击提交验证不起作用：jquery

这里的问题是验证不起作用，点击提交。相反，我得到错误信息：

$(document).ready(function() { 
 
    $("#form").validate({ 
 
     rules: { 
 
      "name": { 
 
       required: true, 
 
       minlength: 5 
 
      }, 
 
      "email": { 
 
       required: false, 
 
       email: true 
 
      } 
 
     }, 
 
     messages: { 
 
      "name": { 
 
       required: "Please, enter a name" 
 
      }, 
 
      "email": { 
 
       required: "Please, enter an email", 
 
       email: "Email is invalid" 
 
      } 
 
     }, 
 
     submitHandler: function (form) { // for demo 
 
      alert('valid form submitted'); // for demo 
 
      return false; // for demo 
 
     } 
 
    }); 
 

 
});

<form id="form" method="post" action="#"> 
 
    <label for="name">Name</label> 
 
    <input type="text" name="name" id="name" /> 
 
    <label for="email">Email</label> 
 
    <input type="email" name="email" id="email" /> 
 
    <button type="submit">Submit</button> 
 
</form>

这里是的jsfiddle：https://jsfiddle.net/aimanpanday87/hsdscmcj/

来源

2017-02-20 Aiman

您的例子并不包括验证插件。你确定你的网页也有吗？ – nbo

你有没有添加jquery验证插件文件？ – rahulsm

@Aiman请检查这个工作小提琴链接：https：//jsfiddle.net/hsdscmcj/5/ –

显示下面的代码编辑在后期代码只添加JS链接

$(document).ready(function() { 
 
    $("#form").validate({ 
 
     rules: { 
 
      "name": { 
 
       required: true, 
 
       minlength: 5 
 
      }, 
 
      "email": { 
 
       required: false, 
 
       email: true 
 
      } 
 
     }, 
 
     messages: { 
 
      "name": { 
 
       required: "Please, enter a name" 
 
      }, 
 
      "email": { 
 
       required: "Please, enter an email", 
 
       email: "Email is invalid" 
 
      } 
 
     }, 
 
     submitHandler: function (form) { // for demo 
 
      alert('valid form submitted'); // for demo 
 
      return false; // for demo 
 
     } 
 
    }); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.js"></script> 
 
<form id="form" method="post" action="#"> 
 
    <label for="name">Name</label> 
 
    <input type="text" name="name" id="name" /> 
 
    <label for="email">Email</label> 
 
    <input type="email" name="email" id="email" /> 
 
    <button type="submit">Submit</button> 
 
</form>

来源

2017-02-20 12:30:01

@ sujal-patel感谢您的帮助。我添加了js链接及其工作。但问题是它在js小提琴上而不是在Dreamweaver上工作。我写了确切的代码。但js不起作用。 – Aiman

打开控制台并显示是否有红线写入 –

@ sujal-patel是它显示：未捕获ReferenceError：$未定义在file：/// D：/ html/bent/New％20folder％20（2）/ validation .js：1：1 （validation）@ validation.js：1 – Aiman

请让你的代码像下面或查看下面拨弄链接：

工作代码链接：https://jsfiddle.net/hsdscmcj/9/

  <form id="form" method="post" action="#"> 
       Name 
       <input type="text" name="name" id="name" /> 
       Email 
       <input type="email" name="email" id="email" /> 
       <button type="submit">Submit</button> 
      </form> 

      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
      <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.15.0/jquery.validate.js"></script> 
      <script> 

      $(document).ready(function() { 
       $("#form").validate({ 
        rules: { 
         "name": { 
          required: true, 
          minlength: 5 
         }, 
         "email": { 
          required: true, 
          email: true 
         } 
        }, 
        messages: { 
         "name": { 
          required: "Please, enter a name" 
         }, 
         "email": { 
          required: "Please, enter an email", 
          email: "Email is invalid" 
         } 
        }, 
        submitHandler: function (form) { // for demo 
         alert('valid form submitted'); // for demo 

        } 
       }); 

      }); 

      </script>

这是工作请检查。

感谢

来源

2017-02-20 12:03:26

你会得到什么错误？ –

请检查我的代码在这里https://jsfiddle.net/hsdscmcj/5/它工作。 –

@AmanKumar你为什么误导。这个https://jsfiddle.net/hsdscmcj/5/代码也适用于名称和电子邮件。 –

点击提交验证不起作用：jquery

回答

相关问题