0

I try to validate a form, when I hit the submit button. But it just continues on posting data entered in the form to the subsequent page like the validation did not even exist.

This the validation codes

<script>
$(document).ready(function() {
    $("#regForm").validate({

        errorLabelContainer: $("#ErrorBox"). wrapper: "li",
        rules: {
            fullname: {
                required: true,
                minlength: "2"
            },
            email:{
                required: true,
                email: true
            },
            address: {
                required: true
            },

            contact_no: {
                required: true,
                digits: true,
                minlength: "7"
            },
            username: {
                required: true
            },
            password: {
                required: true
            },
            confirmPassword: {
                required: true,
                equalto: "#password"
            }
        },
        messages: {
          fullname: {
              required: "Please enter your name",
              minlength: "Your name must consist of at least 2 characters"
          },
          email: {
              required: "Please enter your email",
              email: "Please enter a recodnisable email format"
          },
          address: {
              required: "Please enter your address"
          },

          contact_no: {
              required: "Please enter your contact number",
              digit: "Please enter in digits",
              minlength: "Please enter a minimum of 7"

          },
          username: {
              required: "Please enter your username"
          },
          password: {
              required: "Please enter a valid password"
          },
          confirmPassword: {
              required: "Please enter the password again",
              equalto: "Please enter a matching password"
          }
        }
    });
});

This is the form

<form class="cmxform" id="regForm" action="DoRegister.php" method="post">
        <fieldset style="width:270px;">
            <table>
                <tr>
                    <td class="col-right-align"><label><b>Full Name:</b></label></td>
                    <td><input type="text" name="fullname" /></td>
                </tr>
                <tr>
                    <td class="col-right-align"><label><b>Email:</b></label></td>
                    <td><input type="text" name="email" /></td>
                </tr>
                <tr>
                    <td class="col-right-align"><label><b>Address:</b></label></td>
                    <td><input type="text" name="address" /></td>
                </tr>
                <tr>
                    <td class="col-right-align"><label><b>Date of Birth:</b></label></td>
                    <td><input type="date" name="dob" /></td>
                </tr>
                <tr>
                    <td class="col-right-align"><label><b>Contact No:</b></label></td>
                    <td><input type="text" name="contact_no" /></td>
                </tr>

                <tr>
                    <td colspan="2"><hr /></td>
                </tr>
                <tr>
                    <td class="col-right-align"><label><b>Username:</b></label></td>
                    <td><input type="text" name="username" /></td>
                </tr>
                <tr>
                    <td class="col-right-align"><label><b>Password:</b></label></td>
                    <td><input type="password" name="password" id="password" /></td>
                </tr>
                <tr>
                    <td class="col-right-align"><label><b>Confirm Password:</b></label></td>
                    <td><input type="password" name="confirmPassword" /></td>
                </tr>
                <tr>
                    <td class="col-right-align"></td>
                    <td><input type="submit" value="submit" name="submit"/></td>
                </tr>
            </table>
        </fieldset>
    </form>
<div><u1 style="color:red;" id="ErrorBox"></u1></div>

3
  • Any error in console? Commented May 10, 2015 at 9:11
  • no error appears whatsoever. and i changed the code like you said, it still doesnt run Commented May 10, 2015 at 9:17
  • try commenting errorLabelContainer: $("#ErrorBox").wrapper("li"), this line Commented May 10, 2015 at 9:24

1 Answer 1

1

There are some errors in the code such as missing comma and $document instead of $(document) as @tushar mentions.

i fixed those and created jsfiddle for that see the link

http://jsfiddle.net/jigardafda/bb1j3ktp/1/

<form class="cmxform" id="regForm" action="DoRegister.php" method="post">
        <fieldset style="width:270px;">
            <table>
                <tr>
                    <td class="col-right-align"><label><b>Full Name:</b></label></td>
                    <td><input type="text" name="fullname" /></td>
                </tr>
                <tr>
                    <td class="col-right-align"><label><b>Email:</b></label></td>
                    <td><input type="text" name="email" /></td>
                </tr>
                <tr>
                    <td class="col-right-align"><label><b>Address:</b></label></td>
                    <td><input type="text" name="address" /></td>
                </tr>
                <tr>
                    <td class="col-right-align"><label><b>Date of Birth:</b></label></td>
                    <td><input type="date" name="dob" /></td>
                </tr>
                <tr>
                    <td class="col-right-align"><label><b>Contact No:</b></label></td>
                    <td><input type="text" name="contact_no" /></td>
                </tr>

                <tr>
                    <td colspan="2"><hr /></td>
                </tr>
                <tr>
                    <td class="col-right-align"><label><b>Username:</b></label></td>
                    <td><input type="text" name="username" /></td>
                </tr>
                <tr>
                    <td class="col-right-align"><label><b>Password:</b></label></td>
                    <td><input type="password" name="password" id="password" /></td>
                </tr>
                <tr>
                    <td class="col-right-align"><label><b>Confirm Password:</b></label></td>
                    <td><input type="password" name="confirmPassword" /></td>
                </tr>
                <tr>
                    <td class="col-right-align"></td>
                    <td><input type="submit" value="submit" name="submit"/></td>
                </tr>
            </table>
        </fieldset>
    </form>
<div>
<u1 style="color:red;" id="ErrorBox"></u1></div>

JS

$(document).ready(function() {
    $("#regForm").validate({
        errorLabelContainer: $("#ErrorBox"),
        wrapper: "li",
        rules: {
            fullname: {
                required: true,
                minlength: "2"
            },
            email:{
                required: true,
                email: true
            },
            address: {
                required: true
            },

            contact_no: {
                required: true,
                digits: true,
                minlength: "7"
            },
            username: {
                required: true
            },
            password: {
                required: true
            },
            confirmPassword: {
                required: true,
                equalto: "#password"
            }
        },
        messages: {
          fullname: {
              required: "Please enter your name",
              minlength: "Your name must consist of at least 2 characters"
          },
          email: {
              required: "Please enter your email",
              email: "Please enter a recodnisable email format"
          },
          address: {
              required: "Please enter your address"
          },

          contact_no: {
              required: "Please enter your contact number",
              digit: "Please enter in digits",
              minlength: "Please enter a minimum of 7"

          },
          username: {
              required: "Please enter your username"
          },
          password: {
              required: "Please enter a valid password"
          },
          confirmPassword: {
              required: "Please enter the password again",
              equalto: "Please enter a matching password"
          }
        }
    });
});
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.