Wednesday, May 2, 2012

Mootool Validation for Form Field

To Display a label if field value doesn't exists on submit the form we can use mootool validation as follows.

//Example Form Field

<input type="text" size="30" class="required invalid" value="" id="jform_contact_name" name="jform[contact_name]" aria-required="true" required="required">
<span style="display:none;color:#993300;margin-left: 111px;" id="jform_contact_name-lbl_id">Enter Name</span>



// Mootool validation function to display label

handleResponse: function(state, el)
{
// Find the label object for the given field if it exists
if (!(el.labelref)) {
var labels = $$('label');
labels.each(function(label){
if (label.getProperty('for') == el.getProperty('id')) {
el.labelref = label;
}
});
}

// Set the element and its label (if exists) invalid state
//alert(state);
if (state == false) {
el.addClass('invalid');
if (el.labelref) {

val = $(el.labelref).id+"_id";
//alert(val);
document.getElementById(val).style.display='block';

$(el.labelref).addClass('invalid');
}
} else {
el.removeClass('invalid');
if (el.labelref) {
val = $(el.labelref).id+"_id";
document.getElementById(val).style.display='none';
$(el.labelref).removeClass('invalid');
}
}
}

No comments:

Post a Comment