Reputation: 125

Check all conditions in form using jquery

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>
<body>
<h1>USER REGISTRATION</h1>
<br>
<form class="for" name="ureg" method="post" action="">
<fieldset style="margin-right: 900px">
<legend>Registration Form</legend>
<pre>
Name              <input class="name" type="text"><span id="errmsg5"></span></input><br><br>
User Name         <input class="uname" type="text"><span id="errmsg6"></span></input><br><br>
Password          <input class="pass" type="password" name="pass"><span id="errmsg7"></span></input><br><br>
Confirm Password  <input class="cpass" type="password" name="cpass"><span id="errmsg1"></span></input><br><br>
Email             <input type="email"></input><br><br>
Gender            <input type="radio" name="gender" value="male">Male</input><input type="radio" name="gender" value="female">Female</input><br><br>
Country           <select name="country" style="width: 175px;">
                    <option value="india">India</option>
                    <option value="pakistan">Pakistan</option>
                    <option value="sri lanka">Sri Lanka</option>
                    <option value="china">China</option>
                    <option value="china">Japan</option>
                    <option value="china">Bangladesh</option>
                    </select><br><br>
Mobile            <input class="mob" type="number"><span id="errmsg3"></span></input><br><br>
Age               <input class="age" type="number" name="age"><span id="errmsg2"></span></input><br><br>
D.O.B             <input type="date"></input><br><br>
Address           
<textarea rows="4" cols="50" name="address"></textarea><br><br>
Pincode           <input class="pin" type="number"><span id="errmsg4"></span></input><br><br>
<input id="submit" type="submit" value="SUBMIT">                <input id="reset" type="submit" value="RESET">
</pre>
</fieldset>
</form>

<script type="text/javascript">
    $(function () {

            $(".cpass").change(function () {
            var password = $(".pass").val();
            var confirmPassword = $(".cpass").val();
            if (password != confirmPassword) 
            {
                $("#errmsg1").text(" Password does not match");
                return false;
            }
            else
            {
                $("#errmsg1").text("");
                return true;
            }
        });
            $(".age").change(function () {
            $("#errmsg2").text(" ");
            var n = $(".age").val();

            if (n < 18) {
                $("#errmsg2").text( " Age should be > 18");
                return false;
            }
            return true;
        });

            $(".mob").change(function () {

            $("#errmsg3").text( " ");
            var mobile = $(".mob").val();

            if (mobile.length != 10) {
                $("#errmsg3").text( " Not a valid number");
                return false;
            }
            return true;

        });

            $(".pin").change(function () {
            $("#errmsg4").text( " ");

            var mobile = $(".pin").val();

            if (mobile.length != 6) {
                $("#errmsg4").text( " Not a Valid Pincode");
                return false;
            }
            return true;

        });


            $(".name").change(function () {
            $("#errmsg5").text( " ");
            var name = $(".name").val();
            var pattern = new RegExp("^[A-z]+$");

            if (!pattern.test(name)) {
                $("#errmsg5").text( " Name should contain only letters");
                return false;
            }
            return true;
        });

            $(".uname").change(function () {
            $("#errmsg6").text( " ");
            var uname = $(".uname").val();
            var pattern = new RegExp("^[A-z0-9]+$");

            if (!pattern.test(uname)) {
                $("#errmsg6").text( " User Name should contain only numbers and alphabets");
                return false;
            }
            return true;
        });

            $(".pass").change(function () {
            $("#errmsg7").text(" ");
            var pass = $(".pass").val();
            if(pass.length>8)
            {
                var caps = /[A-Z]/.test(pass);
                var small = /[a-z]/.test(pass);
                var num= /[0-9]/.test(pass);
                var sp=/\W|_/.test(pass);
                if(caps&&small&&num&&sp)
                {
                    $("#errmsg7").text("");
                    return true;
                }
                else
                {
                    $("#errmsg7").text("Password should be of minimum 8 characters and contain atleast 1 upper case, 1 lower case, 1 digit and 1 special characters");
                    return false;
                }
            }
            else
            {
                $("#errmsg7").text("Password should be of minimum 8 characters and contain atleast 1 upper case, 1 lower case, 1 digit and 1 special characters");
                    return false;
            }
        });


    });
</script>

</body>
</html>

this my code for validating the form. Once the SUBMIT is pressed i want to check the values one more time. or alternatively the the submit would work only when all the conditions are true. is there any way to do it?

Upvotes: 0

Answers (1)

Taylor Daughtry

Reputation: 249

You can target the form and check for the 'submit' event, then return false if the values aren't right. Alternatively, you could preventDefault on the event with e.preventDefault(); and submit the form with AJAX.

EDIT: Here's the short version of what I generally do as a first-pass for form validation. Note that this is the absolute least you should be doing. Users can simply remove the required attribute, and get by your first-pass validation, so you should always check for the absolutely required fields in addition, as well as check on the server-side after sanitizing the input. (As in, remove disallowed chars then check for proper data.)

$('form.validate').on('submit', function(e, el) {
  var inputs = $(this).find('input[required]'),
    empty = $(inputs).map(function(e, el) {
      if (el.value === '') {
        return el;
      }
    });

  if (empty.length > 0) {
    return false;
  }
})

Upvotes: 1

Check all conditions in form using jquery

Answers (1)

Related Questions