Add custom checks to Spry

I was working on a web application, and it used Spry for performing client side checking. One of the problem I had was to made the rule for checking one of the textfield input changing dynamically depending on a radio buttons selected by a user previously. Though spry is reasonable good for most part, it seems to be very static.

To get around this problem, here were the steps I used:


1) Change the submit button to plain button, and assign your own form validation function to the onclick event, i.e.

<input type="button" value="submit" onclick="checkform()">

2) Within the checkform() function, do something like the below:

function customValidationFunction(){
// put your own validation functions here.
return true;
}

function checkform(){
var f = document.getElementById("yourformname");
if(
customValidationFunction() && Spry.Widget.Form.validate(f){
f.submit();
}

}

The above would make the form validation process to include your own steps. Now, let's explain how spry shows its errors. Below is a sniplet of html code used by Spry. Spry enable and disable showing off an error message by the adding and removing the class "<error type>Stated" from an element, i.e. <span id="sprytextfield1" class="textfieldRequiredState"> to enable the error message; <span id="sprytextfield1" class=""> to disable the error message

/*Text Field styling classes*/
.textfieldRequiredMsg,
.textfieldInvalidFormatMsg,
.textfieldMinValueMsg,
.textfieldMaxValueMsg,
.textfieldMinCharsMsg,
.textfieldMaxCharsMsg,
.textfieldValidMsg {
display: none;
}
.textfieldRequiredState .textfieldRequiredMsg,
.textfieldInvalidFormatState .textfieldInvalidFormatMsg,
.textfieldMinValueState .textfieldMinValueMsg,
.textfieldMaxValueState .textfieldMaxValueMsg,
.textfieldMinCharsState .textfieldMinCharsMsg,
.textfieldMaxCharsState .textfieldMaxCharsMsg {
display: inline;
color: #CC3333;
border: 1px solid #CC3333;
}
.textfieldValidState input, input.textfieldValidState {
background-color: #B8F5B1;
}
input.textfieldRequiredState, .textfieldRequiredState input,
input.textfieldInvalidFormatState, .textfieldInvalidFormatState input,
input.textfieldMinValueState, .textfieldMinValueState input,
input.textfieldMaxValueState, .textfieldMaxValueState input,
input.textfieldMinCharsState, .textfieldMinCharsState input,
input.textfieldMaxCharsState, .textfieldMaxCharsState input {
background-color: #FF9F9F;
}
.textfieldFocusState input, input.textfieldFocusState {
background-color: #FFFFCC;
}
.textfieldFlashText input, input.textfieldFlashText {
color: red !important;
}
.textfieldHintState input, input.textfieldHintState {
}

<span id="sprytextfield1">
<input type="text" name="mytextfield" id="mytextfield" />
<!--Display an error message>.
<span class="textfieldRequiredMsg">Please enter a description</span>
</span>

Therefore, if you want to include your own error message, you can do something similar. Let us be a bit lazy, and use one of the unused predefined state for our custom purpose. Let's say, we, want to ensure the first letter of the input is a capital letter. To do so, I decided to use the textfieldMaxCharsState for displaying our error message.

<span id="sprytextfield1">
<input type="text" name="mytextfield" id="mytextfield" />
<!--Display an error message>.
<span class="textfieldRequiredMsg">Please enter a description</span>
<span class="textfieldMaxCharsMsg">Your custom error message here.</span>
</span>

Remember earlier, I mentioned that Spry enables and disables the error message by adding and removing the class name from a specific span. We need to do the same in our custom validation function .

function customValidationFunction(){

var elmt = document.getElementById("sprytextfield1");

if(validation is true){

// This would triggers the . textfieldMaxCharsMsg CSS directive alone, and

// hence hides the error message

elmt.removeAttribute("class");

return true;

}else{

// This would triggers the . textfieldMaxCharsState . textfieldMaxCharsMsg CSS directive, and // hence shows the error message

elmt.setAttribute("class", "textfieldMaxCharsState";

return false;

}

}

I hope this tutorial make sense to you. If you found any errors both syntactic or grammatical error, please leave me a comment, so I can correct them.