CODEWITHSUNDEEP
jqueryvalidationsemantic-ui
Karl Viiburg
Karl Viiburg

Reputation: 832

Semantic UI form validation - validate certain form fields only if value is not empty

I have a form that has fields that are required and also fields that are optional. I am using Semantic UI's Form Validation behavior to validate the fields.

However what I want to achieve is that the form validation behavior only validates the optional fields when they have a value in them.

An example optional field:

<div class="field">
    <label>First name</label>
    <input type="text" name="first_name" placeholder="First name">
</div>

An example required field:

<div class="required field">
    <label>E-mail address</label>
    <input type="text" name="email" placeholder="E-mail address">
</div>

I gave a try by ommiting the empty validation rule but that didn't work.

Is there something built-in to the form validation behavior that can help me achieve this or would I need to write a custom validation for my optional fields?

Upvotes: 2

Views: 8508

Answers (2)

Karl Viiburg
Karl Viiburg

Reputation: 832

Update: This feature has now been implemented in version 1.2.0. The same optional flag can be used: https://semantic-ui.com/behaviors/form.html#optional-fields

Previous anwser and solution for Semantic versions < 1.2.0:

I managed to work out a working solution for optional fields by extending the Semantic UI form validation behavior.

Firstly I added an optional flag, to each ruleset. This can be set either true or false:

firstname: {
    identifier: "first_name",
    optional: true,
    rules: [
        {
            type: "regex[^[a-zA-Z -]+$]",
            prompt: "First name can only consist of letters, spaces and dashes"
        }
    ]
}

I then searched for the function that handles the validation for each field and there I extended it by adding an if statement to check if the optional flag is set to true and the value is empty. If the criteria is true, then the validation is skipped for the empty field and returned as valid.

The function can be found around 4600ish line in the uncompressed semantic.js or search for the function comment:

// takes a validation object and returns whether field passes validation
field: function(field) {
    var
        $field      = module.get.field(field.identifier),
        fieldValid  = true,
        fieldErrors = []
    ;

    if(field.optional && $.trim($field.val()) == ""){
        module.debug("Field is optional and empty. Skipping", field.identifier);
        return true;
    }
    if(field.rules !== undefined) {
        $.each(field.rules, function(index, rule) {
            if( module.has.field(field.identifier) && !( module.validate.rule(field, rule) ) ) {
                module.debug('Field is invalid', field.identifier, rule.type);
                fieldErrors.push(rule.prompt);
                fieldValid = false;
            }
        });
    }
    if(fieldValid) {
        module.remove.prompt(field, fieldErrors);
        $.proxy(settings.onValid, $field)();
    }
    else {
        formErrors = formErrors.concat(fieldErrors);
        module.add.prompt(field.identifier, fieldErrors);
        $.proxy(settings.onInvalid, $field)(fieldErrors);
        return false;
    }
    return true;
}

Upvotes: 5

HackerGK
HackerGK

Reputation: 370

You can easily use JQuery Validation plugin for this. try it at

http://jqueryvalidation.org/

Upvotes: 0

Related Questions