[RESOLVED] Form Validation

Hi, I have created this code that validates a field but I am having issues showing colors to the field when the value is entered correctly/incorrectly.

//Assignment Number Validation - [Wizard 2]
  fd.spRendered(function() {
    fd.field('Assignment_x0020_Number_x0020_').validators.push({
        name: '',
        error: '',
        validate: function(value) {
            if ((/^\d{8}(-\d{1,2})?$/).test(value)) {
            $fd.field('Assignment_x0020_Number_x0020_').css(green);
            return true; // Validation succeded
            }
            // You land here if it did not succeed
            this.error = 'Invalid Assignment Number. Please enter a minimum of 8 digits.';
            $fd.field('Assignment_x0020_Number_x0020_').css(red);
            return false;
        }
    });
});

Any help would be appreciated! :slight_smile:

Dear @DryChips,
This should work for Single Line text and Number fields:

$($(fd.field('Title').$el).find('input')[0]).attr('style', 'color:red');

2 Likes

HI @Nikita_Kurguzov,

thanks for this!

I have a requirement to add a tooltip validation to the form. How can I inject this into JQuery?

Any guidance on how this is possible would be really helpful!

Here is an example....
image

Dear @DryChips,
Not really possible at the moment, as far as I know, though you can add a tooltip with the following code:

$($(fd.field('Title').$el).find('input')[0]).attr('title', 'Fill the field');

1 Like

Ahh, no worries. I'll work with what I have at the moment.

Thanks for your support!

Hiya,

Sorry to keep bothering you.

I did some digging online and I noticed that there are two CSS Pseudo Classes available. These are referred to as: ':valid & :invalid'

The question I propose is, is it possible to write a JS Conditional and then refer to the ':valid & :invalid' pseudo classes in the CSS Editor?

In the :valid class we can add a tooltip, border-color and background colour to the field when the input is correct and vice-versa.

Could you please help out with this if possible, I'm not very experienced at coding but any suggestions or some code will set me to the right path.

Dear @DryChips,
Sure, you can something similar with CSS like this:

.fd-form .form-control.is-invalid{
  color: red!important;
}

Hi,

How would I connect this CSS to the code you provided? Is it possible to enable/disable the CSS when it passes/errors?

$($(fd.field('Title').$el).find('input')[0]).attr('title', 'Fill the field');

Dear @DryChips,
This CSS is automatic, it doesn't need JavaScript. It just applies style to a field when it's invalid, similar to the red border that it already has. Valid field will not have this style applied.

It's just a different way of doing it.

1 Like

I seeeee.

To be correct, if I add in the CSS above for :Valid and :Invalid it will automatically style the fields according to whatever properties I have assigned to them?

But I need to make sure I have some JavaScript in there as a form of 'validation', by extension, how would I target those two classes to activate?

Can I ask, is this correct?
.fd-form .form-control.is-valid{
color: red!important;
}

Dear @DryChips,
Yes, the validation is still the same as before - you do need JavaScript for it, but you don't need the line that sets the color of text, this is done by CSS.

Looks correct, try it. It has nothing to do with pseudo classes though, this is a class used on the forms to apply style to the invalid fields, you just need new styles to it.

1 Like

Perfect! Thank you for confirming.

I will try it out! Thanks for your patience. :smile:

So I have tested out the invalid class and it works!

.fd-form .form-control.is-invalid{
  color: red!important;
}

But what if something is valid? Can I apply styling to this as well? Nothing seems to appear in the form signaling that the validation has succeeded.

.fd-form .form-control.is-valid{
  color: Green !important;
}

Dear @DryChips
There is no such class for valid fields. You can set text as green by default:

.fd-form .form-control{
  color: green!important;
}

But then it would appear green until validation happens, even if the value is invalid.

If you want it to be green after validation only, use JavaScript as before.

$($(fd.field('Title').$el).find('input')[0]).attr('style', 'color:green');

1 Like

Ahhh, I see. I thought there was a way to do this. Never mind!

Thanks for the advice :slight_smile:

Hi Nikita,

I have a validation problem pertaining to "Multiselect" drop-down field.

I have this code which works as intended but the problem I am having is if I select a different option from the drop-down, it continues to validate the field when the field isn't visible under the tab.

Do you know why this happens?

//This code will validate the New Name field - [Personal Details]
fd.field('New_Email_Address').validators.push({
    name: '',
    error: "Please enter the New Email Address",
    validate: function(value) {
        if (fd.field('Question_2').value.includes('Personal Details')){
            if (/[\S+]{0,63}@[\S]{0,25}$/g.test(value)){
            return true;
            }
            return false;
        }
        }
});

In the picture below, if I select "Home Address" and proceed to the next wizards, the email address validation field flags up when I don't want it to. The email address field is under the "Personal Details" tab and should only flag up when the validation is unsuccessful.

image

image

Dear @DryChips,
Have you tried using indexOf instead of includes? Also, don't forget to return true in the end.

//This code will validate the New Name field - [Personal Details]
fd.field('New_Email_Address').validators.push({
    name: '',
    error: "Please enter the New Email Address",
    validate: function(value) {
        if (fd.field('Question_2').value.indexOf('Personal Details') >= 0){
            if (/[\S+]{0,63}@[\S]{0,25}$/g.test(value)){
              return true;
            }
            return false;
        }
        return true;
    }
});
1 Like

Hi Nikita,

Back again with another problem that I'm facing.

So I have written this code which validates a single line text field input but it doesn't pass the validation when I enter a value in the threshold I have set.

//This code will validate the New Phone Number field - [Personal Details]
fd.field("New_Phone_Number").validators.push({
    name:"",
    error:"",
    validate: function (value){
           if (fd.field('Question_2').value.indexOf('Personal Details')>=0){
                  if (value < 11 || value > 20){
                  this.error = "Please enter a minimum of 11 digits";
                  return false;
                  }
                  return true;
           }
           return true;
    }
});

I have used this code for a drop-down field in another form and it works as intended but it doesn't work when I use it for multi-select drop-down field.

Dear @DryChips,
You're trying to compare a phone number with a number value. You should compare the length of the value instead:

//This code will validate the New Phone Number field - [Personal Details]
fd.field("New_Phone_Number").validators.push({
    name:"",
    error:"",
    validate: function (value){
           if (fd.field('Question_2').value.indexOf('Personal Details')>=0){
                  if (value.length < 11 || value.length > 20){
                  this.error = "Please enter a minimum of 11 digits";
                  return false;
                  }
                  return true;
           }
           return true;
    }
});
1 Like

That's interesting and good to know.

Many thanks!

I have noticed a validation issue with using this code:

I am reusing the code you have provided for another field which is under the Emergency Details Tab and I get an error in the console:

I select the Personal Details option && Emergency Details Option in the multiselect drop-down field. The issue I am having, its not Validating the other phone number field that is under the Emergency Details Tab.

Do I need to write some code that accounts for this possibility? E.g. IF user selects Personal Details && Emergency Details => do something....

I don't think there is a need as the validation code is referring to a list in an array and does that job for me already.