Validation

By Kevin M Schreiner

January 06, 2010


To use validation in Open Web Studio, without the need for post backs, we started with the notion of simply piggy-backing the provided validation logic from Microsoft .Net. However, as many people are aware, the validation on the client-side fails to work for any browser that is not Internet Explorer. To solve this issue, we took the time to delve into the logic of the javascript library, and make a few corrections to the code, then added a few additional features which makes the logic far more intelligent, and much more usable in an AJAX driven scenario.

Standard Validation


To use OWS's validation library, you need to first Check the "Validation Library" checkbox in the "General Settings" of the View Options administration. With that initial step completed, you can use the standard Microsoft Validation attributes in an HTML form.  Use the example below and consult he Microsoft support knowledgebase: Client-Side Functionality in a Server Control. With the option checked, you can now use the validation scripts just as they would be rendered by the asp.net code. For each element that you want to  validate, you will need to add the custom validation, typically by using a SPAN tag which will act as both the definition of the validation, as well as the location of the error message on validation failure. The basic validation attributes for the tag are as follows:

controltovalidate - identifies the ID of the input tag that to be validated. *Many developers forget to place both the name and ID attributes on each form element that they are submitting. The server requires Name to exist within the elements, while the validation library requires an ID.
errormessage - defines the error message to display when validation fails.
display - specifies the default display behavior. Values are Dynamic or None.
evaluationfunction - maps to one of the predefined evaluation functions in the Validation library:

o CompareValidatorEvaluateIsValid - Compares a user's entry against a constant value, or against a property value of another control, using a comparison operator.

o CustomValidatorEvaluateIsValid -

o RegularExpressionValidatorEvaluateIsValid - Checks that the entry matches a pattern defined by a regular expression

o RequiredFieldValidatorEvaluateIsValid  -   Forces the user to enter a value into the specified control.

o RangeValidatorEvaluateIsValid - Checks that a user's entry is between specified lower and upper boundaries. You can check ranges within pairs of numbers, alphabetic characters, and dates.

validationexpression - used by RegularExpressionValidator, this expression performs string structure verification.

initialvalue - can be used to Get or Set the initial value for the validation target.

group -  To allow some validators to work only on specific areas of your page, a group name can be specified that will execute the validators against a specific group whenever you attempt validation. (Refer to the [Group Validation|#Group Validation] section later in this article)
Follow along in the sample and see just how our script uses the functionality. Items appearing in Orange are Open Web Studio tags for Column values and Actions:

<table cellspacing="0" cellpadding="0" width="95%" border="0" class="Normal" align="center">
    <tr>
        <td width="200">
            <span class="normalBold">First Name:</span>
        </td>
        <td>
            <input name=FirstName id=FirstName type="text" value="[FirstName]"/>
            <span
                id="vFirstName"
                controltovalidate="FirstName"
                errormessage="This is a required field"
                display="Dynamic"
                evaluationfunction="RequiredFieldValidatorEvaluateIsValid"
                initialvalue=""
                style="color:Red;display:none;">This is a required field</span>
        </td>
    </tr>
    <tr>
        <td width="200">
            <span class="normalBold">Last Name:</span>
        </td>
        <td>
            <input name=LastName id=LastName type="text" value="[LastName]" />
            <span
                id="vLastName"
                controltovalidate="LastName"
                errormessage="This is a required field"
                display="Dynamic"
                evaluationfunction="RequiredFieldValidatorEvaluateIsValid"
                initialvalue=""
                style="color:Red;display:none;">This is a required field</span>
        </td>
    </tr>
    <tr>
        <td width="200">
            <span class="normalBold">Address 1:</span>
        </td>
        <td>
            <input name=Address1 id=Address1 type="text" value="[Address1]"/>
            <span
                id="vAddress1"
                controltovalidate="Address1"
                errormessage="This is a required field"
                display="Dynamic"
                evaluationfunction="RequiredFieldValidatorEvaluateIsValid"
                initialvalue=""
                style="color:Red;display:none;">This is a required field</span>
        </td>
    </tr>
    <tr>
        <td width="200">
            <span class="normalBold">City:</span>
        </td>
        <td>
            <input name=City id=City type="text" value="[City]"/>
            <span
                id="vCity"
                controltovalidate="City"
                errormessage="This is a required field"
                display="Dynamic"
                evaluationfunction="RequiredFieldValidatorEvaluateIsValid"
                initialvalue=""
                style="color:Red;display:none;">This is a required field</span>
        </td>
    </tr>
    <tr>
        <td width="200">
            <span class="normalBold">Email Address:</span>
        </td>
        <td>
            <input name=Email id=Email type="text" value="[Email]"/>
            <span
                id="vEmail"
                controltovalidate="Email"
                errormessage="This is a required field"
                display="Dynamic"
                evaluationfunction="RequiredFieldValidatorEvaluateIsValid"
                initialvalue=""
                style="color:Red;display:none;">This is a required field</span>
           <span
                id="vEmailValid"
                controltovalidate="Email"
                errormessage="Email address not in valid format"
                display="Dynamic"
                evaluationfunction="RegularExpressionValidatorEvaluateIsValid"
                validationexpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*"
                style="color:Red;display:none;">Valid email required</span>

       </td>
    </tr>
    <tr>
        <td>
            <span class="normalBold">Phone:</span>
        </td>
        <td>
            <input name="Phone" type="text" id="Phone" value="[Phone]"/>
            <span
                id="vPhone"
                controltovalidate="Phone"
                errormessage="Enter Phone number in the proper format"
                display="Dynamic"
                evaluationfunction="RegularExpressionValidatorEvaluateIsValid"
                validationexpression= "((\(\d{3}\) ?)|(\d{3}-))?\d{3}-\d{4}"
                style="color:Red;display:none;">Enter Phone number in the proper format</span>
        </td>
    </tr>
    <tr>
        <td colspan="2" align="center">
            <a onclick="if (typeof(Page_SmartValidate) == 'function') return Page_SmartValidate();"
                    language="javascript" {ACTION,Save,Action,,Message}>Save</a>
            | <a {ACTION,Cancel,Action,,Message}>Cancel</a>
        </td>
    </tr>
</table>

In the preceding example, the Page_SmartValidation call automatically locates each of the validators within the form and performs the required evaluation. You may also want to display the standard Summary error list, which is populated by the associated errormessage attribute of the SPAN tags. To do this, simply add a SPAN tag that identifies itself as a Summary: as in the following example:

<span
showsummary="True"
displaymode="BulletList"
headertext="The following errors were identified:"
style="color:Red;display:none;">
</span>

The possible properties of this summary span tag are: showsummary - True displays it, False hides it.

showmessagebox - Displays the output in a Message box alert. displaymode - Controls the look and feel of the output, the possibilities are: List; BulletList; SingleParagraph. headertext - identifies text to display at the top of the list, whenever errors occur.

Validation with Button and Ajax Callback (ows.Fetch)



<input type=button
                  onclick="if (typeof(Page_SmartValidate) == 'function' && Page_SmartValidate())
                  {ows.Fetch('[ModuleID,System]',-1,'Action=Submit');} return false;" value="Submit" />
 

Custom Validation

Custom validation allows you to define a custom function to call in the event that the standard validators don't provide you with everything you need. An  next example conducts a Date Comparison between two fields. To use this type of logic need to change the validator to include the following:

set the evaluationfunction to "CustomValidatorEvaluateIsValid"
add the attribute clientvalidationfunction setting it to the name of the function to call.

for example:

            <input name="frmDate1" id="frmDate1" type="text" value="[Date1]"/>
            <input name="frmDate2" id="frmDate2" type="text" value="[Date2]"/>
            <span
                id="vDateCheck"
                controltovalidate="frmDate2"
                errormessage="Date2 should be greater than Date1"
                display="Dynamic"
                evaluationfunction="CustomValidatorEvaluateIsValid"
                clientvalidationfunction="checkDate"
                initialvalue=""
                style="color:Red;display:none;">Date2 should be greater than Date1</span>


Add the following script function to the page, checking to compare frmDate1 and frmDate2 in the checkDate function:

function compareDateFields(fField1,fField2)
{

var rslt = (new Date(document.getElementById(fField2).value) > new Date(document.getElementById(fField1).value))?'1':'-1');

return rslt;

}

function checkDate(oSrc,args)
{

    args.IsValid = false;;

    if (compareDateFields('frmDate1','frmDate2')==1)

                 args.IsValid = true;

}

Group Validation


IF you require validation within groups of elements on your page, not every element all together - set a group attribute on your validator span tags, as defined previously. Once set, pass the name of the group as the single parameter to the Page_SmartValidate function.


<input type=text name='frmEmail' id='frmEmail' style="width:100px" />
<input type=button value='go' name='go' id='go'
                language="javascript"
                onclick="if (typeof(Page_SmartValidate) == 'function') if (Page_SmartValidate('groupname')) {ACTION,Save,Save,,Message,False}" />

<span
    id="vEmail"
    group="groupname"
    controltovalidate="frmEmail"
    errormessage="This is a required field"
    display="Dynamic"
    evaluationfunction="RequiredFieldValidatorEvaluateIsValid"
    initialvalue=""
    style="color:Red;display:none;">
        This is a required field
</span>
<span
    displaymode="BulletList"
    headertext="The following errors were identified:"
    style="color:Red;display:none;"></span>

Group Validation with Postback ({ACTION})


<input type=text name='frmEmail' id='frmEmail' style="width:100px" />
<a onclick="if (typeof(Page_SmartValidate) == 'function') {return Page_SmartValidate('groupname')} else {return false}" {ACTION,Save,Save,,Message,True} >SUBMIT</a>
<span
    id="vEmail"
    group="groupname"
    controltovalidate="frmEmail"
    errormessage="This is a required field"
    display="Dynamic"
    evaluationfunction="RequiredFieldValidatorEvaluateIsValid"
    initialvalue=""
    style="color:Red;display:none;">
        This is a required field
</span>
<span
    displaymode="BulletList"
    headertext="The following errors were identified:"
    style="color:Red;display:none;"></span>

Group Validation with Button and Ajax Callback (ows.Fetch)



<input type=text name='frmEmail' id='frmEmail' style="width:100px" />
<input type=button value='go' name='go' id='go'
                language="javascript"
                onclick="
                    if (typeof(Page_SmartValidate) == 'function')
                        if (Page_SmartValidate('groupname'))
                            {ows.Fetch('[ModuleID,System]',-1,'Action=Submit');}
                " />

<span
    id="vEmail"
    group="groupname"
    controltovalidate="frmEmail"
    errormessage="This is a required field"
    display="Dynamic"
    evaluationfunction="RequiredFieldValidatorEvaluateIsValid"
    initialvalue=""
    style="color:Red;display:none;">
        This is a required field
</
span>
<span
    displaymode="BulletList"
    headertext="The following errors were identified:"
    style="color:Red;display:none;"></span>
 

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