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
– Simeon Ikudabo, Commented Feb 7, 2020 at 8:36
Have you tried adding event.preventDefault(); to the click event as well? Then it won't submit. — fdomn-m
– fdomn-m, Commented Feb 7, 2020 at 8: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. — fdomn-m
– fdomn-m, Commented Feb 7, 2020 at 8: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? — user23139
– user23139, Commented Feb 7, 2020 at 9:46

user23139 · Accepted Answer · 2020-02-10 03:37:27Z

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);
  })
})

Simeon Ikudabo · Accepted Answer · 2020-02-07 08:44:26Z

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 7, 2020 at 8:44

Simeon Ikudabo

2,1901 gold badge14 silver badges28 bronze badges

6 Comments

fdomn-m Over a year ago

How is this any different from using button type=button other than using an <a> is semantically incorrect (so should be a <button>).

user23139 Over a year ago

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.

Simeon Ikudabo Over a year ago

@LordSacha What do you mean by "I am trying to check if the form itself is invalid"?

user23139 Over a year ago

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')};

Simeon Ikudabo Over a year ago

@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?

|

Hemant · Accepted Answer · 2020-02-07 09:07:15Z

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 7, 2020 at 9:07

Hemant

1,02813 silver badges23 bronze badges

3 Comments

user23139 Over a year ago

is there anyway to determine whether the form itself is valid instead of checking validity for each input?

Hemant Over a year ago

Yes you can that's why i asked you if you are using some validation plugin. check this out stackoverflow.com/questions/6658937/…. and you can use this $("#form_id").valid() in if case.

user23139 Over a year ago

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.

Collectives™ on Stack Overflow

How to run function if html form is invalid?

3 Answers 3

Comments

6 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

6 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related