CODEWITHSUNDEEP
javascriptjqueryformsvalidation
user2789786
user2789786

Reputation: 3

Jquery validate - needing at least 1 of 2 fields populated with anything other than default text

I have an html contact form which has default values in each field - ie. "First name" (wherein I'm using clearfield.js so that the values disappear when the user clicks)

I have 2 fields which must be filled in, and 2 fields where either of which must be filled in. Of course, all fields are already recognised as being filled in as they all have default values. I've worked my way around this by using validator.addMethod to ignore the default phrases.

I've also managed to tweak the validation to allow at least 1 of 2 fields to be filled in using validator.addMethod, but only when I take out the default values.

My problem occurs when I have the default values present and I wish to have at least 1 of 2 fields filled in. I can't figure out how to have the validation recognise when/if at least one field has a unique non-default value.

I've included my code below.

I'm no expert in jquery/javascript, so hopefully there's a simple solution out there.

<script type="text/javascript"> 
    $(document).ready(function() {

        jQuery.validator.addMethod("notEqual", function(value, element, param) {
          return this.optional(element) || value != param;
        }, "This field is required.");

        jQuery.validator.addMethod("require_from_group", function (value, element, options) {
            var numberRequired = options[0];
            var selector = options[1];
            var fields = $(selector, element.form);
            var filled_fields = fields.filter(function () {
                return $(this).val() != "";

            });
            var empty_fields = fields.not(filled_fields);
            if (filled_fields.length < numberRequired && empty_fields[0] == element) {
                return false;
            }
            return true;
        }, jQuery.format("Please enter either a phone number or email address."));


      $("#contact-form").validate({
        groups: {
            names: "phone email"
        },         
        rules: {
          fname: {
            required: true,
            notEqual: "First name*"
            }, 
          lname: {
            required: true,
            notEqual: "Last name*"
            },
          phone: {
            require_from_group: [1, ".phoneEmail"]
            },
          email: {
            require_from_group: [1, ".phoneEmail"]
            },
        }

        });

    });

    jQuery.extend(jQuery.validator.messages, {
        require_from_group: jQuery.format("'Please enter either username/ email address to recover password'/Please fill out at least {0} of these fields.")
    });


<form id="contact-form" method="post" action="contact-submitted.php" >          
        <input type="text" class="clearField" name="fname" id="fnameField" value="First name*" />
        <input type="text" class="clearField" name="lname" id="lnameField" value="Last name*" />
        <input type="text" class="hidden" name="subject" id="subjectField" />
        <input type="text" class="clearField phoneEmail" name="phone" id="phoneField" value="Phone number*" />
        <input type="text" class="clearField phoneEmail" name="email" id="emailField" value="Email" />
        <textarea name="message" class="clearField" id="messageField">Your message</textarea>
        <span class="required-field">*required field</span>
        <input type="submit" id="contact-submit" value="Start planning now" />
    </form>

Upvotes: 0

Views: 1229

Answers (2)

sudhansu63
sudhansu63

Reputation: 6180

In order to check the uniqueness of email or phone number you need to do an Ajax call as soon as the field is filled.

Upvotes: 0

Arun P Johny
Arun P Johny

Reputation: 388316

Try using the decaultValue property

jQuery.validator.addMethod("require_from_group", function (value, element, options) {
    var numberRequired = options[0];
    var selector = options[1];
    var fields = $(selector, element.form);

    var filled_fields = fields.filter(function () {
        return $(this).val() != this.defaultValue;
    });
    if (filled_fields.length < numberRequired && filled_fields.index(element) == -1) {
        return false;
    }
    return true;
}, jQuery.format("Please enter either a phone number or email address."));

Demo: Fiddle

Upvotes: 1

Related Questions