Question

I have this jquery code:

<script src="../js/jquery-1.6.1.min.js" type="text/javascript"></script>
<script src="../js/jquery.validate.js" type="text/javascript"></script>
<script type="text/javascript">

jQuery(function(){
    jQuery("#zip").validate({
        expression: "if (VAL.match(/^[0-9]{5}$//)) return true; else return false;",
        message: "invalid zip code"
    });
    jQuery("#email").validate({
        expression: "if (VAL.match(/^[^\\W][a-zA-Z0-9\\_\\-\\.]+… return true; else return false;",
        message: "invalid email"
    });
});    
</script>

<form action="save.php">
    <input type="text" name="email" id="email" />
    <input type="text" name="zip" id="zip" />
    <input type="submit" name="go" id="go"  value ="go" />
</form>

but when i hit the submit button it does not validate the zip and email, it submits the form. Is my “expression” wrong?

Thanks

Answer 1

Feedback on this form

This concept of a five character, numbers-only postal code will only handle people in the United States.

Other countries have more complicated postal codes, with fewer or more digits required, or with non-numeric characters. For example, Canada supports alphanumeric postal codes.

If you are sure you want this website to only work for people in the US, then don’t worry about this. Otherwise I recommend letting that field be more flexible.

Code troubles

I think you’ll have less of a headache for a simple form like this if you use the built-in validation rules. It can handle both of these fields very easily.

See this fiddle: http://jsfiddle.net/tzMTs/

Source:

<script src="../js/jquery-1.6.1.min.js" type="text/javascript"></script>
<script src="../js/jquery.validate.js" type="text/javascript"></script>
<script type="text/javascript">
    $("#somethingForm").validate();
</script>

<form id="somethingForm" action="save.php">
    <span>E-Mail</span>
    <input type="text" name="email" id="email" class="required email" />
    <br>
    <span>Zip Code</span>
    <input type="text" name="zip" id="zip"
        class="required digits" minlength="5" maxLength="5" />
    <input type="submit" name="go" id="go"  value ="go" />
</form>