jQuery Custom Validation Rule - fieldPresent

This tutorial demonstrates how to create custom validation rules for your forms using the jQuery.validate.js plugin, expanding upon a previous guide on setting up form validation. We'll leverage the $.validator.addMethod() function to define these rules. A live demo is provided, and the examples include handling date of birth validation. Note: A patched version addressing cross-browser compatibility and recursion issues is included.

Examples:

The following examples illustrate custom validation rules ensuring that both a name and email field are populated. If one is filled, the other must be as well.

• Left Field Validation:
• Right Field Validation:
• Both Fields in Action (Multiple Pairs):

Live Demo:

(Edit on jsfiddle)

JQuery Code (Patched Version):

This improved snippet resolves cross-browser inconsistencies and recursion problems:

<code class="language-javascript">// Custom validation: each friend entered must have an email and a name
$.validator.addMethod("fieldPresent", function(value, element, options) {
    var targetEl = $('input[name="' + options.data + '"]'),
        targetEmpty = (targetEl.val() == ''),
        elEmpty = (value == ''),
        bothEmpty = elEmpty && targetEmpty;

    if (!bothEmpty && targetEmpty) {
        setTimeout(function() {
            if (targetEl.closest('.control-group-inner').find('label.fieldPresentError').length == 0) {
                targetEl.addClass('error');
                if (!elEmpty) $(element).closest('.control-group-inner').find('label.fieldPresentError').remove();
                targetEl.closest('.control-group-inner').find('label.fieldPresentError').remove();
                targetEl.after("<label class="fieldPresentError">Friend's name and email required.</label>");
            }
        }, 500);
    }

    return (bothEmpty || !elEmpty);
}, "Friend's name and email required.");

$('#myForm').validate({
    onkeyup: true,
    rules: {
        "friend1-name": { "fieldPresent": { data: "friend1-email" } },
        "friend1-email": { "fieldPresent": { data: "friend1-name" } }
    },
    submitHandler: function(form) {
        console.log('passed validation.');
        //submit form handler
    }
});</code>

HTML:

<code class="language-html"><form id="myForm">
    <div class="control-group">
        <div class="control-group-inner">
            <label for="friend1-name">Friend's name</label>
            <input type="text" name="friend1-name">
        </div>
        <div class="control-group-inner">
            <label for="friend1-email">Email Address</label>
            <input type="email" name="friend1-email">
        </div>
    </div>
    <button type="submit">Submit</button>
</form></code>

CSS:

<code class="language-css">.control-group {
    width: 100%;
}

.control-group-inner {
    width: 50%;
    float: left;
    display: inline-block;
}

.error {
    border: 1px solid red;
}

label.fieldPresentError {
    color: red;
    display: block;
    margin-top: 5px;
}</code>

Date of Birth Validation (3 Inputs):

This section shows how to validate a date of birth using three separate fields (day, month, year):

<code class="language-javascript">// Custom validation for dob
$.validator.addMethod("dobValid", function(value, element, options) {
    var day = $('input[name="dob-day"]'),
        month = $('input[name="dob-month"]'),
        year = $('input[name="dob-year"]'),
        anyEmpty = (day.val() == '' || month.val() == '' || year.val() == '');

    if (anyEmpty) {
        day.add(month).add(year).addClass('error');
    } else {
        day.add(month).add(year).removeClass('error');
    }

    return !anyEmpty;
}, "Please enter your date of birth.");

// ... (rest of your validation code, including the rules for dob-day, dob-month, dob-year)</code>

Remember to include the necessary <script></script> tags for jQuery and the jQuery Validate plugin in your HTML file. This enhanced tutorial provides a more robust and reliable solution for custom form validation.

The above is the detailed content of jQuery Custom Validation Rule - fieldPresent. For more information, please follow other related articles on the PHP Chinese website!