CiviCRM Community Forums (archive)

I was recently looking to see if a site used CiviCRM - which it didn't - and came across some slick looking html for in-browser validation. I'm not sure if this is standard WordPress stuff or not (see view-source:https://contribute.ontarioliberal.ca/Home/Donate). It seems like it might be something that we could define for fields in xml/schema and then not only use on server-side validation but also on the client-side.

For example:

<div class="element">
            <label for="prefix">Salutation</label>
            <select data-val="true" data-val-regex="Valid Prefix Required" data-val-regex-pattern="(Mrs.|Ms.|Mr.|Dr.)" data-val-required="The prefix field is required." id="prefix" name="prefix"><option value="">select</option>
<option value="Mr.">Mr.</option>
<option value="Ms.">Ms.</option>
<option value="Mrs.">Mrs.</option>
<option value="Dr.">Dr.</option>
</select>
            <span class="field-validation-valid" data-valmsg-for="prefix" data-valmsg-replace="true"></span>
        </div>
        <div class="element">
            <label for="first_name">First Name</label>
            <input class="text-box single-line" data-val="true" data-val-required="First Name Required" id="first_name" name="first_name" type="text" value="" />
            <span class="field-validation-valid" data-valmsg-for="first_name" data-valmsg-replace="true"></span>
        </div>
....
<div class="element">
            <label for="postal_code">Postal Code</label>
            <input data-val="true" data-val-regex="Valid Canadian Postal Code Required (No Extra Whitespaces)" data-val-regex-pattern="^[KkLlMmNnPp]\d[A-Za-z]\s?\d[A-Za-z]\d$" data-val-required="Postal Code Required" id="postal_code" name="postal_code" type="text" value="" />
            <span class="field-validation-valid" data-valmsg-for="postal_code" data-valmsg-replace="true"></span>
        </div>
        <div class="element">
            <label for="telephone">Primary Telephone</label>
            <input data-val="true" data-val-regex="Valid Format Required. Ex. 555-555-5555" data-val-regex-pattern="(1-?)?(\([2-9]\d{2}\)|[2-9]\d{2})-?[2-9]\d{2}-?\d{4}" data-val-required="Telephone NumberRequired" id="telephone" name="telephone" type="text" value="" />
            <span class="field-validation-valid" data-valmsg-for="telephone" data-valmsg-replace="true"></span>
        </div>
        <div class="element">
            <label for="email">Email Address</label>
            <input data-val="true" data-val-regex="Valid Email Format Required (no caps)" data-val-regex-pattern="((([a-z]|\d|[!#\$%&amp;&#39;\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&amp;&#39;\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$" data-val-required="Email Address Required" id="email" name="email" type="text" value="" />
            <span class="field-validation-valid" data-valmsg-for="email" data-valmsg-replace="true"></span>
        </div>

As of 4.2 we ship with the jQuery validate plugin. As of 4.3 we actually use it
Still haven't enabled it on every form, but doing so is fairly trivial.

Coleman, is the jQuery stuff being configured to run (somehow via a few layers) based on field definitions in the xml schema spec?

No, but adding validation rules into the schema metadata is a very good idea.
PS To see the current behavior in action, try editing a contact's email or website (via inline edit) and enter an invalid address.

There are already quite a few rules that we have in php that also exist in jQuery validate. So if our metadata looked something like this then the form builder could add both the proper css class (for jQuery validate to pick up) and the form rule.
<validationRule>email</validationRule>

It would be good if it also was possiple to add validation to custom made edit in-place fields.
For example if I have a view displaying e-mail fields for contacts, and I enable edit in-place for this field (as explained in the wiki), there's currently no validation for that field - I can enter whatever I want in that field.