How to run function if html form is invalid?

Question

I am making a form. I need to give feedback if form is invalid by changing button style and text so user know that their action they are trying to perform is not performed.

Here is what I got to run function if form is valid, which work perfectly.

$('#form').submit(function(event){
    // cancels the form submission
    event.preventDefault();

    // do stuff if form valid
    $("#btn-copy").html('COPY SUCCESS')
    console.log('Text is copied.')
});

I need to run function if the form is invalid. If form is valid, both click and submit is registered so the two function collides. This is my current failed work around since if form valid button will say COPY FAIL, COPY SUCCESS, COPY, instead of COPY SUCCESS

$("#btn-copy").click(function(){
    $(this).html('COPY FAIL');
    setTimeout(function(){
        $('#btn-copy').html('COPY');
    },1000);
   console.log('COPY FAIL.')
})

How do I run function only if submit button is clicked, but form is invalid (therefore, submit is not triggered). And the other way around if form is valid only run my valid function.

NOTE: Button has to be type:submit because of the first valid code I used, unless there is other options to achieve what I am trying to achieve since I don't want submit event anyway that's why I am doing event.preventDefault()

Have you tried using a link as a button? When it is clicked, simply trigger the validation, and then submit the form if it is valid. — Simeon Ikudabo, Feb 07 '20 at 08:36
Have you tried adding `event.preventDefault();` to the click event as well? Then it won't submit. — freedomn-m, Feb 07 '20 at 08:43
Also slightly confused as there's no apparent checks - if you click the button it fails, but if you submit it's ok? But the button **must** be a submit button? Simplest answer is, of course, not to have a type=submit button and call form.submit() if it passes. — freedomn-m, Feb 07 '20 at 08:45
Well I am sorry for the misunderstanding yes I need to do some check to determine if form is valid but I am not sure how. I only how to check if form is valid via .submit. So what I was thinking is to run my 'notvalid functions' onclick. Which works because if i click the button and form not valid, whatever function inside the click is run. The problem if my form is valid, both click and submit registers. I assume if event.preventdefault() to the onclick, then if my form is valid, submit won't run and my form will keep failing. Wouldn't it? — REDACTEDーーーーーーーーーーーーーーーーーーーーーー, Feb 07 '20 at 09:46

REDACTEDーーーーーーーーーーーーーーーーーーーーーー · Accepted Answer · 2020-02-10T03:37:27.870

If invalid, on button click give feedback if form is invalid by changing button style and text. If valid, and button is clicked, .submit functions run.

$("#btn-copy").click(function(e){
   if(document.getElementById('form-pesan').checkValidity()){
    console.log('form valid and button clicked');
      $(this).html('RUN');        
   }
   else {
    console.log('form invalid and button clicked');
       $(this)
         .html('Please Recheck Form')
         .attr("disabled", true);
       setTimeout( function(){
        $("#btn-copy") 
         .html('RUN')
         .attr("disabled", false);
       },1500);
   }
});

  // Submit is always triggered only if validity is true
  $('#form').submit(function(event){
    // cancels the form submission (personal need).
    event.preventDefault();

    // MY COMMANDS
    $("#btn-copy").html('RUN SUCCESSFULLY');
    console.log('Form is valid and button is pressed');
    setTimeout(function(){
      $('#btn-copy').html('RUN');
     },1000);
  })
})

score 0 · Answer 2 · answered Feb 07 '20 at 08:44

0

I'd use a link as a button if that's the case. You can style that using CSS if you want. Then you can perform your validation if it is clicked. I made a quick example where if the user doesn't type a username that is at least 6 characters long, the form is invalid, otherwise it is valid:

<form method="post" action="/some-random-action.html">
  <input type='text' class='form-control' placeholder='username' id="username">
  <small class='form-text text-muted'>Username must be at least 6 characters</small>
  <br>
  <a href="#" class="btn btn-primary" id="submit-btn">
    Submit
  </a>
</form>

Then we can simply use that like that is clicked to trigger the validation:

$('#submit-btn').on('click', function() {
    if($('#username').val().length < 6) {
        alert("Hey, that username isn't like enough bro");
    }
    else {
        $('form').submit();
    }
});

answered Feb 07 '20 at 08:44

Simeon Ikudabo

2,152
1
10
27

1

How is this any different from using `button type=button` other than using an `` is semantically incorrect (so should be a ` – freedomn-m Feb 07 '20 at 08:46
I need to style the button not the input. and I am sorry if I didn't word it properly I am trying to check if the form itself is invalid instead of checking if the input if invalid. – REDACTEDーーーーーーーーーーーーーーーーーーーーーー Feb 07 '20 at 09:48
@LordSacha What do you mean by "I am trying to check if the form itself is invalid"? – Simeon Ikudabo Feb 07 '20 at 09:53
form itself is invalid means there are 1 or more input that is invalid inside that form. in chrome mean there is yellow exclamation mark. So if there is one or more input invalid run function(){$('#btn').html('Retry')}; – REDACTEDーーーーーーーーーーーーーーーーーーーーーー Feb 07 '20 at 10:04
@LordSacha okay, what is the specific kind of validation you’re looking for within the form? Typically validation warnings, such as the yellow exclamation in chrome, are based on some criteria that you’ve set for that input to be valid. What would trigger an invalidation in your code? – Simeon Ikudabo Feb 07 '20 at 10:15
specifically required validation and type=tel validation. I was looking for if there is a way to trigger it form wide. "if there is at least one invalid input, button onclick run this command" – REDACTEDーーーーーーーーーーーーーーーーーーーーーー Feb 07 '20 at 11:31

score 0 · Answer 3 · answered Feb 07 '20 at 09:07

0

I assume that you are using some validation plugin or manually checking form validation.

i have created a jsfiddle

HTML Markup:

<form action="/" id="form">
  <input type="text" id="username" />
  <button type="submit">Submit</button>
</form>

<h2 id="result"></h2>

JS Code:

$('#form').submit(function(event){
    if ($('#username').val().length < 6) {

      // you code if validation failed

        event.preventDefault();
      $("#result").html('COPY FAILED');
    } else {

      // you code if validation succeed and form is valid
      // it will auto submit form, so no need to register 
      // submit and click event separatly.
      $("#result").html('COPY SUCCESS');
    }

});

answered Feb 07 '20 at 09:07

Hemant Sankhla

923
12
23

is there anyway to determine whether the form itself is valid instead of checking validity for each input? – REDACTEDーーーーーーーーーーーーーーーーーーーーーー Feb 07 '20 at 09:52
Yes you can that's why i asked you if you are using some validation plugin. check this out https://stackoverflow.com/questions/6658937/how-to-check-if-a-form-is-valid-programmatically-using-jquery-validation-plugin. and you can use this ```$("#form_id").valid()``` in ```if``` case. – Hemant Sankhla Feb 07 '20 at 09:58
No I only use required and type=tel html validations, for now. If this is not easy to accomplish then I will look into using the plugin. – REDACTEDーーーーーーーーーーーーーーーーーーーーーー Feb 07 '20 at 10:07

How to run function if html form is invalid?

3 Answers3