CODEWITHSUNDEEP
javascriptjqueryformsvalidationangularjs
Nelson Menezes
Nelson Menezes

Reputation: 57

JS to validate a form on clicking submit

I am a newb to js and I have prepared a form using angular JS an JQuery.The code is as follows:

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

And the Script fot the above form is as follows:

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

The Reset and the close button work absolutely fine but he problem is that the Submit button validation is not working properly. Right now I am just trying to validate the fname field and it is not working for me. I cannot figure out the exact reason for this. Can anyone please try and help me to get past this problem.

Upvotes: 0

Views: 527

Answers (2)

thefourtheye
thefourtheye

Reputation: 239613

List of problems with the code.

  1. Never name a variable or a function with a javascript keyword. In this case null
  2. For onsubmit event to work, submit button's type should be submit not button.
  3. You already have required field in fname field and you are still trying to validate it.

Upvotes: 1

Nandakumar
Nandakumar

Reputation: 1101

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 [email protected]"
}

} }); Validate Plugin

Upvotes: 1

Related Questions