Custom validation

By Kateryna Sytnyk

December 12, 2008

Password Confirmation


<script type = "text/javascript">

function passwordConfirmation(val, args)

{

var password1 = document.getElementById("frmPassword"); jQuery("#frmPassword").val();

var password2 = document.getElementById("frmconfirmPassword");

var isValidConfirmation = (password1.value == password2.value)

args.IsValid = isValidConfirmation;

}

</script>

 

 

 <span id="vPasswordConfirmation"

                 controltovalidate="frmconfirmPassword"

                 errormessage="The password confirmation failed"

                 display="Dynamic"

                 evaluationfunction="CustomValidatorEvaluateIsValid"

                 clientvalidationfunction = "passwordConfirmation"

                 initialvalue="" class="FormValidationError">Password confirmation failed

 </span>

 

Validate radioboxes checked:

Checks if either East or West coast is sected. Implemented as external JavaScript function

<script type="text/javascript">

 

function validRadio()

{

var radio_choice = false;

var chks = document.getElementsByName("Coast");

for (counter=0; counter < chks.length; counter++)

{

if (chks[counter].checked) {

radio_choice = true;

break;}

}        

if (!radio_choice)

document.getElementById("EastError").style.display = "";

else document.getElementById("EastError").style.display = "none";

return radio_choice;

}

 

</script>

 

 
On page submission :

onclick="if (typeof(Page_SmartValidate) == 'function') if (validRadio() && Page_SmartValidate()){ACTION,Save,Save,,Message,False}; else return false;

 
HTML segment:

<span class="SubHead">East or West Coast:</span>

<br/><input type="radio" name="Coast" id="Coast1" value="East"  {IIF, "[Coast,Q] = East", "checked", ""} onchange="lxFetch([ModuleID],0,'Coast=East');">East 

<input type="radio" name="Coast" id="Coast2" value="West"   {IIF, "[Coast,Q] = West", "checked", ""} onchange="lxFetch([ModuleID],0,'Coast=West');"> West 

<span id="EastError" style="color:Red;display:none;"><br/> Please select the coast</span>

3-field phone validation


<script type = "text/javacript">

 

function phoneconfirmation(mode)

{

var phone1, phone2, phone3, errorMessage;

 

if (mode == 'cell')

{

phone1 = document.getElementById("frmCellPhoneAreaCode").value;

phone2 = document.getElementById("frmCellPhoneFirstThree").value;

phone3 = document.getElementById("frmCellPhoneLastFour").value;

errorMessage = document.getElementById("cellPhoneValidationError");

}

else if (mode == 'business')

{

phone1 = document.getElementById("frmBusinessPhoneAreaCode").value;

phone2 = document.getElementById("frmBusinessPhoneFirstThree").value;

phone3 = document.getElementById("frmBusinessPhoneLastFour").value;

errorMessage = document.getElementById("businessPhoneValidationError");

}

 

var re3digit=/^\d{3}$/;                //regular expression defining a 3 digit number

var re4digit=/^\d{4}$/;                //regular expression defining a 4 digit number        

 

 

if ((phone1.search(re3digit)==-1 || phone2.search(re3digit)==-1 || phone3.search(re4digit)==-1 ) && !(phone1 == "" && phone2 == "" && phone3 == ""))

{

errorMessage.style.display = 'block';

}

else

{

errorMessage.style.display = 'none';

}

}

 

</script>

 

      <div class="row">

            <label for = "frmBusinessPhoneAreaCode" class="label">Business Phone:</label> <span class="form">

                <input name="frmBusinessPhoneAreaCode" id="frmBusinessPhoneAreaCode" class="phone" onblur = "phoneconfirmation('business')"/>

<input name="frmBusinessPhoneFirstThree" id="frmBusinessPhoneFirstThree" class="phone" onblur = "phoneconfirmation('business')"/>

<input name="frmBusinessPhoneLastFour" id="frmBusinessPhoneLastFour" class="phone" onblur = "phoneconfirmation('business')"/></span>

<span id = "businessPhoneValidationError" class="FormValidationError" > Phone number format is: xxx xxx xxxx </span>

        </div>

        <div class="row">

            <label for = "frmCellPhoneAreaCode" class="label">Cell Phone:</label> <span class="form">

                <input name="frmCellPhoneAreaCode" id="frmCellPhoneAreaCode" class="phone" onblur = "phoneconfirmation('cell')"/>

                <input name="frmCellPhoneFirstThree" id="frmCellPhoneFirstThree" class="phone" onblur = "phoneconfirmation('cell')"/>

                <input name="frmCellPhoneLastFour" id="frmCellPhoneLastFour" class="phone" onblur = "phoneconfirmation('cell')"/></span>

<span id = "cellPhoneValidationError" class="FormValidationError" > Phone number format is: xxx xxx xxxx </span>

 

        </div>

 
This can also be implemented as Custom OWS Validation. 1st field: the condition is: the 1 field failed 2nd field: 1st didn't fail, and 2nd failed 3d field: 1st and 2nd didn't fail, and 3d failed

Synchronizing an external JavaScript validation with Smart Validation

You have a JavaScript function "ContactInfoValidation", also you use OWS Smart Validation to validate say required fields on the forms. Here's how you can make them work together: On submit button click:

onClick="if (typeof(Page_SmartValidate) == 'function') { var v = ContactInfoValidation(); if (Page_SmartValidate() && v) {ACTION,Submit,Submit,,M,false};}  return false; "

 
Plus on every field that may impact validation status add:

onblur = "ContactInfoValidation(); return false;"

This checking would automatically happen with Smart validation, but if you're using a separate JavaScript function, you need to make sure to check it yourselt. Overall, it's always the better practise to use Custom Smart Validation, so that the validation process would be consistent.
Average (0 Ratings):
 
Want to help out?
 
 

New York, NY • Baltimore, MD • Vienna, VA • St. Louis, MO • Seattle, WA • info@openwebstudio.com

Bookmark & Share Bookmark and Share