2

I'm trying to debug a snippet, so I can understand how it works the native javascript validation checkValidity():

Here's the problem:

First I create an array of value and a form connected with a click event:

jQuery('input[name="submit-request-form"]').click(function() {
    var fields = [ 'FirstName','Lastname','Email','Telephone','CampusID','ProgramID'];
    var form = 'flow-request-form';
    disableSubmitButton( $(this) , fields , form );

});

The next step is to create a function in order to get all the elements in the form based on my array and if all of them are filled, change the value valid to false and submit the form.

function disableSubmitButton( Obj , fields , form ){

    var valid = true;
    for (var i = 0 ; i < fields.length ; i++) {
        var element = jQuery('form[name="'+form+'"] [name="'+fields[i]+'"]');
        console.log( element[0].checkValidity());
        if( element[0] && !element[0].checkValidity() ){
            valid = false;
            break;
        }
    }
    console.log(valid);
    if(valid){
        Obj.attr('disabled' , 'disabled');
    }
}

In case the value of my form will be not filled or invalid, the valid variable won't change to false and it will disable the button.

Something though got wrong and my value will always be true.

Do someone knows why?

The snippet is the following:

if( element[0] && !element[0].checkValidity() ){
    valid = false;
    break;
}

that's where my code fails

Porcellino80
  • 447
  • 7
  • 32
  • I must admit, I'm a little confused - this seems like a highly convoluted way of checking the validity of a form. (And extremely brittle, given that you're hard-coding the names of form inputs into your script.) Other than this though I can't yet see anything *wrong* as such - but I'm bound to ask, since you have that `console.log` in there, what gets output in the console? – Robin Zigmond Feb 20 '19 at 22:30
  • 2
    You should disable the button if the form is *not* valid. – Barmar Feb 20 '19 at 22:30
  • it should be `if (!valid)` – Barmar Feb 20 '19 at 22:33
  • it outputs the input 6 true – Porcellino80 Feb 20 '19 at 22:38
  • You are all right, I just try to debug that snippet. I would have done differently, but I kind of like the approach and the challenging. The only thing is that it's not quiet clear for me the checkvalidity() native function – Porcellino80 Feb 20 '19 at 22:45
  • 1
    I think this code snippet should give you a better idea of how the checkValidity() function works. https://www.w3schools.com/js/tryit.asp?filename=tryjs_validation_check – Jose Reyes Feb 21 '19 at 00:40

1 Answers1

4

You could use form.reportValidity() for that. It basically checks the form and validates it, and if it detects an invalid field, it will return a popup message.

trackedInput = $('#trackedInput');
confirmSubmit = $('#confirmSubmit');
yourForm = document.querySelector('#confirm');

confirmSubmit.click(function(e) {
  yourForm.reportValidity();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="hidden">
  <input id="trackedInput" type="text" form="confirm" required>
</div>

<div class="hidden">
  //Some other stuffs here
</div>

<div class="not_hidden">
  <input id="confirmSubmit" type="submit" form="confirm" required>
</div>

<form id="confirm"></form>
Ekown
  • 438
  • 6
  • 12
  • 1
    You'd be surprised how difficult it is to find jQuery validation's `.reportValidity()`. You're a lifesaver: Thank you! – FoggyDay Jun 20 '22 at 20:00