CODEWITHSUNDEEP
javascripthtmljqueryformsvalidation
yashjain12yj
yashjain12yj

Reputation: 773

HTML5 Pattern Validation not working when submitting form through onsubmit attribute

I am trying to submit a form through onsubmit attribute. But I want HTML validation to work as well.

function submitForm() {
  if(somecondition){
      //used this to submit form without it I was not able to submit the form
      $("form#form").submit();
      return true;
  }
  else{
      return false;
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="search" method="post" id="form" onsubmit="return submitForm()">
  <input type="text" pattern="[A-Za-z]" required>
</form>

But even after not giving any value, the form is submitted.

Upvotes: 2

Views: 2027

Answers (3)

I am L
I am L

Reputation: 4632

The following code should not call "submit" if the input didn't matched the pattern

<form action="search" method="post" id="form">
  <input type="text" pattern="[A-Za-z]" required title="1 letter only">
</form>

var form = $("#form");

form.on("submit", function(e){
e.preventDefault();
   alert('Submitted')
});

working fiddle here: https://jsfiddle.net/lightblue/94wj7cnb/1/

For the pattern:

  • [a-zA-Z] matches ONE letter from A–Z in lowercase and uppercase.
  • [a-zA-Z]+ matches one or more letters (one word)

In your case, it will only match 1 letter

Upvotes: 0

mrdeadsven
mrdeadsven

Reputation: 774

When using JQuery to do Submit it will not look to the validation of HTML it will just bypass it. However there is a way to do this as I show below. So what I do here is. First to keep it simple instead of firing the Submit when loading the page I created a link with the submitForm() function. I also created a submit button which is invisible. Then in the submitForm() function you can find the hidden button and trigger a click event which will trigger the submit from the button and validate your HTML.

This way you can use JQuery to fire the submit and code whatever other code you need in JQuery.

EDIT: changed the snippet to still use the submit() JQuery function while validating.

function submitForm(){
        // do some stuff
        
        if ($('#form')[0].checkValidity()) {
                 $('#form').submit();
            }
    }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="search" method="post" id="form">
    <input type="text" id="warning" required>
    
    <a href="javascript: void(0);" onclick="submitForm()">Login</a>
</form>

Upvotes: 3

Antoine Gautrain
Antoine Gautrain

Reputation: 421

The pattern attribute of your input is a regexp, you can manually extract it

const patternToMatch = $("input[type="text"]).attr("pattern");

And then instanciate it with :

const regexp = new RegExp(patternToMatch);

To finally ensure input respects it beforme submission

function submitForm() {
     if ($("input[type="text"]).val().match(regexp)) {
            form.submit();
     } else {
            // display message
     }
}

It's blind coding, let me know if it doesn't work :)

Upvotes: 0

Related Questions