Java Ninja Chronicles By Norris Shelton

Things I learned in the pursuit of code

Yeah. jQuery form validation is proving to be very nice. If you have been following this blog, you have seen how to set-up the standard validations and even create your own custom validation. One problem I had to solve was that the validation message broke my UI. I still needed the message, but I didn’t need it to display in the default location which is to the right of the field. That turn out to be very easy. First define an area where you want your validation messages to be displayed.

<form name="myForm" id="myForm" action="">
     <div id="myErrorLabelContainer"></div>
     <input class="required date dateRange" type="text" id="myField" name="myField">
</form>
<input type="submit" value="Go Validate"/>

The next step is to tell the jQuery Validation plugin that you want to use this for the error messages. This is accomplished with the errorLabelContainer option.

<script type="text/javascript">
    $(document).ready(function() {
        $('#executiveConsoleForm').validate({
            errorLabelContainer: "#myErrorLabelContainer"
        });
    });
</script>

This is just the beginning of error place. There is also the errorPlacement option that can be used to define logic to indicate where you want error messages to be displayed. A smal example of this can be found in the groups documentation

December 15th, 2010

Posted In: javascript, JQuery

Tags: , , ,

One Comment

Leave a Reply

Your email address will not be published. Required fields are marked *

WP to LinkedIn Auto Publish Powered By : XYZScripts.com