JS用于在单击提交时验证表单

时间:2013-10-12 06:09:19

标签: javascript jquery forms validation angularjs

我是js的新手,我使用angular JS和JQuery编写了一个表单。代码如下:

<form id="frm1" onsubmit="return null()">
  <table>
    <tr>
      <td>First Name:</td>
      <td><input type="text" ng-model="fname" name="fname" required></td>
    </tr>
    <tr>
      <td>Last Name:</td>
      <td><input type="text" ng-model="Lname" required></td>
    </tr>
    <tr>
      <td>Email ID:</td>
      <td><input type="email" ng-model="mailid" required></td>
    </tr>
    <tr>
      <td>Password:</td>
      <td><input type="password" ng-model="pass" required></td><br/>
    </tr>
    <tr>
      <td>Confirm Password:</td>
      <td><input type="password" ng-model="Cpass" required></td>
    </tr>
    <tr>
      <td>Confirm Password:</td>
      <td><input type="password" ng-model="Cpass" required></td>
    </tr>
    <tr>
      <td>Address:</td>
      <td><textarea ng-model="address" required></textarea></td>
    </tr>
    <tr>
      <td><input type="button" value="reset" onclick="formReset()"></td>
      <td><input type="button" value="submit"></td>
      <td><input type="button" value="Close" onclick="formClose()"></td>
    </tr>
  </table>
</form>

以上表格的脚本如下:

<script type="text/javascript">
  $(document).ready(function(){
    $('a.button-submit').click(function() {
      $("#magic").show();
    });
  });  

  function formReset()
  {
    document.getElementById("frm1").reset();
  }

  function formClose()
  {
    $("#magic").hide();
  }

  function null()
  {
    var x=document.forms["frm1"]["fname"].value;
    if (x==null || x=="") 
    {
      alert("First name must be filled out");
      return false;
    }
  }
</script>

重置和关闭按钮工作正常,但他的问题是提交按钮验证无法正常工作。现在我只是想验证fname字段,它对我不起作用。我无法弄清楚这个的确切原因。任何人都可以尝试帮我解决这个问题。

2 个答案:

答案 0 :(得分:1)

Dude, Use Validate Plugin for Validation
 Example:
  $(".selector").validate({
 rules: {
// simple rule, converted to {required:true}
name: "required",
// compound rule
email: {
  required: true,
  email: true
     }
       }
},
  messages: {
name: "Please specify your name",
email: {
  required: "We need your email address to contact you",
  email: "Your email address must be in the format of name@domain.com"
}

}        });     Validate Plugin

答案 1 :(得分:1)

代码问题列表。

  1. 永远不要使用javascript关键字命名变量或函数。在这种情况下null
  2. 要使onsubmit事件发挥作用,submit按钮的类型应为submit而不是button
  3. 您在required字段中已有fname字段,但您仍在尝试对其进行验证。