So you need to create a quick form which would be easy in plain old HTML but you want to throw in some client side validation, just the thing that javascript packages excel in. Your choices you think are to go ahead and overcomplicate your form by writing it in javascript using the packages and then heavily modifying the CSS to get just the right look (and we all know the number of DOM elements seems to increase exponentially when doing it this way) OR spending time rewriting validation functions that you know are built in if you were just able to get ext to look right! I built the following reusable validation and form submission function using some of ext’s util methods as well as some good old fashioned javascript, since all of the names are referenced by Ext’s DomQuery it becomes an abstract method that could be dropped into any project and connected to any form. Right now I am only making sure that there is text in any given field, however, I am sure with a bit of creativity you can extend this to work with all types of validation requirements! (hint: look into Ext.isNumber(), Ext.isDate() etc.. in the Ext util functions. And then think about the fact that you could make up your own attribute, for example vtype=”crazy_number”). First, we need a HTML form, so for this example the code below will render the form that you see here.
<form id="test_form" method="post " action="some_test.php">
<label for="first_name" >First Name </label><img style="visibility:hidden" src="ext-3.2.1/resources/images/default/form/exclamation.gif" name="first_name_error" />
<input name=" first_name " type="text" onkeyup="javascript:changeStyles(this);" />
<label for="last_name" ><img style="visibility:hidden" src="ext-3.2.1/resources/images/default/form/exclamation.gif" name="where_from_error" />Where are you from? </label>
<select name="where_you_from" >
<option value="here" >Here</option>
<option value="there" >There</option>
<option value="everywhere" >Everywhere</option>
</select>
<input type="button" onclick="javascript:sf()" value="Save" style="width:100px;float:right;margin-top:15px;" class="x-panel-btns" />
</form>
<br><br>
The form above is pretty straight forward, no fancy code, however, you will notice that there is a javascript function in the onclick event of our ‘submit’ button, and in fact there is no real submit button in the html sense. There are also functions on all of the text fields and text areas in the onKeyUp event which will alert the users to the fact that all fields in the form are mandatory. This is done via some CSS that which pulls from the Extjs library to give the invalid boxes the fancy red squiggly line and exclamation point when a value has not been entered and the user tries to press the submit button. The CSS that is required is below, just modify the path to the images to match your Extjs path.
var valid_style = '{border: 1px solid;background-color:#fff;border-color:#ccc;background-image:url(nothing.gif);padding-top:2px;padding-bottom:2px;}';
var invalid_style = '{border: 1px solid;background-color:#fff;background-image:url(/ext-3.2.1/resources/images/default/grid/invalid_line.gif);padding-top:2px;padding-bottom:2px;background-position:center bottom;background-repeat:repeat-x;border-color:#ccc;}';
var ex_pt_show = '{background-image:url(/ext-3.2.1/resources/images/default/form/exclamation.gif);background-repeat:no-repeat;}';
var ex_pt_hide = '{background-image:url(nothing.gif);background-repeat:no-repeat;}';
Next, the javascript that will fire when you submit the form and make sure that everything is valid before updating your back end database. Since you will be using ext to crawl the DOM you can add as many fields as you want to the code below and all you have to do is pass the form name into the validation function.
Ext.onReady(function(){
changeStyles = function(item){
if ( item.value.trim().length==0){
Ext.get(item.name).applyStyles(invalid_style);
doSubmit = false;
} else {
Ext.get(item.name).applyStyles(valid_style);
Ext.get(item.name + '_label').applyStyles(ex_pt_hide);
}
}
function validation(form_id){
// Get all of the form elements
var textBoxes = Ext.DomQuery.select('form[id=' + form_id + '] >input[type=text]');
var selectBoxes = Ext.DomQuery.select('form[id=' + form_id + ']>select');
var textAreas = Ext.DomQuery.select('form[id=' + form_id + ']>textarea');
var doSubmit = true;
Ext.each(textBoxes,function(item,i){
// lets loop through the textfields and see if they have values
if (item.value.trim().length==0){
Ext.get(item.name).applyStyles(invalid_style);
doSubmit = false;
} else {
Ext.get(item.name).applyStyles(valid_style);
Ext.get(item.name + '_label').applyStyles(ex_pt_hide);
}
}); // end of loop through text fields
Ext.each(selectBoxes,function(item,i){
if (item.value.trim().length==0){
Ext.get(item.name).applyStyles(invalid_style);
doSubmit = false;
} else {
Ext.get(item.name).applyStyles(valid_style);
Ext.get(item.name + '_label').applyStyles(ex_pt_hide);
}
});
Ext.each(textAreas,function(item,i){
// lets loop through the text areas and see if they have values
if (item.value.trim().length==0){
Ext.get(item.name).applyStyles(invalid_style);
doSubmit = false;
} else {
Ext.get(item.name).applyStyles(valid_style);
Ext.get(item.name + '_label').applyStyles(ex_pt_hide);
}
}); // end of loop through text areas
return doSubmit;
}
sf = function(form_id){
var doSubmit = validation(form_id);
if(doSubmit == true){
alert('I would have submitted the form in real life!');
} else {
alert('Please fill out all required forms!');
}
}
});
Note: The example form in this post only performs the validation on click, but you can see the code above for the implementation of a fully functional submit button.
