Jquery Extend validation

Hi, I am trying to add extra validation checks on an existing javascript code but I was hoping i can do this without changing the old codes. For example:

Old code:

$(".sendMessage").live("click", function( ) {
        var subject = $.trim( $("#subject").val( ) );

        if( subject == "" ) {
            alert( "No subject added" );
            return false;
        }
        return false;
    });

Would like to add in/extend the sendMessage with extra check so as it becomes:

$(".sendMessage").live("click", function( ) {
        var subject = $.trim( $("#subject").val( ) );
        var content = $.trim( $("#textArea").val( ) );

        if( subject == "" && content == "" ) { // new validation
            alert( "No subject and content added" );
            return false;
        }
        return false;
    });

Is there a proper way to do this?

jQuery does have a validation plugin that allows you to update the form without needing to change the scripting code.

For example, if you have a form element that’s required, with a minimum length of 2 characters, you could then do it with:


<input id="firstname" name="firstname" class="required" minlength="2">

Or, you can do similar without using scripting at all, by making use of HTML5 techniques.


<!doctype html>
...
<input id="firstname" name="firstname" required>

But because screen readers have a difficult time, we really should add a WAI-ARIA role to help them out too.


<!doctype html>
...
<input id="firstname" name="firstname" required="true" aria-required="true">

You can also style your HTML5 required elements and whether they are valid or invalid with:


input:required {
    background-image: url('/images/required.png');
}
input:focus:invalid {
    background-image: url('/images/invalid.png');
}
input:focus:valid {
    background-image: url('/images/valid.png');
}