Can semantic-ui form validation rules on one field be conditional on a different field?

Question

Let's say I have a form with two fields. I'd like the following to be possible:

Submit the form empty - Validation succeeds Both fields contain data - Validation succeeds Field one has data, field two empty - Validation succeeds Field one empty, field two has data - Validation fails

Is there a way to do this?

My server code already validates for this, but I'd love to be able to prevent the client from hitting the server if it doesn't have to.. but if that's not possible, is there a way to pass form validation error messages to the form as the page loads?

Thanks!!

Answer 1

you can use regex for complex validation rule

first add some code to form.js, this file is accessible in:

Semantic-UI-master\\Semantic-UI-master\\dist\\components\\form.js

after this code

// is most likely an email
email: function(value){
  var
    emailRegExp = new RegExp("[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?", "i")
  ;
  return emailRegExp.test(value);
},

add this code

// is most likely an my regex
regex: function(value,reg){
  var
    regexRegExp = new RegExp(reg, "i")
  ;
  return regexRegExp.test(value);
},

and use it in your semantic ui code, like this

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

for example this is my code to validate a complex cod contain only 10 digit or alphabet in mix

            $("form[data-id=\"2\"]").form({
                v: { identifier: 'active_code', rules: [{ type: "regex[^[a3-z8]{10}$]", prompt: 'کد فعال سازی خود را وارد کنید'}] }
            },
            {
                inline: true,
                on: 'blur',
                transition: 'swing left',
                duration: 1000,
                onSuccess: formOnSuccess
            }
            );

the complete code

        $("form[data-id=\"1\"]").form({
            f: { identifier: 'family', rules: [{ type: 'empty', prompt: 'فامیلی خود را وارد کنید'}] },
            e: { identifier: 'email', rules: [{ type: 'email', prompt: 'ایمیل خود را وارد کنید'}] }
        },
            {
                inline: true,
                on: 'blur',
                transition: 'swing left',
                duration: 1000,
                onSuccess: formOnSuccess
            }
        );
        $("form[data-id=\"2\"]").form({
            v: { identifier: 'active_code', rules: [{ type: "regex[^[a0-z9]{10}$]", prompt: 'کد فعال سازی خود را وارد کنید'}] }
        },
            {
                inline: true,
                on: 'blur',
                transition: 'swing left',
                duration: 1000,
                onSuccess: loadPersonal
            }
        );