How to validate form input then run function?

Question

I'm not sure what's the best way to do this. The form has a single text input but I'm not actually using the form data for anything.

I just need to validate that something has been entered. If it has, the form will then be submitted and a function called.

At this stage I'm just trying to get a basic example working with a bare minimum of code. I was thinking of something along the lines of the following:

HTML

<!DOCTYPE html>
<html>
  <head>
    <script
      src="https://code.jquery.com/jquery-3.4.1.min.js"
      integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
      crossorigin="anonymous">
    </script>
  </head>
  <body>
    <form name="myForm" onSubmit="return myFunctionName(event)">
      <input id="postcode" name="postcode" required>
      <input type="submit" value="Click Me">
    </form>
  </body>
</html>

jQuery

<script>
var postreg = /^\d{6}$/;
var postcode = document.getElementById("postcode").value;
function myFunctionName(e) {
  e.preventDefault();
  if (postcode.match(postreg)) {
    alert('success');
  } else {
    alert('please enter the correct 6 digit postcode');
  }
 }
 </script>

Snow · Accepted Answer · 2020-04-14 09:20:15Z

1

Make the field required:

function myFunctionName(e) {
  e.preventDefault(); // just so you can see the below log
  console.log('calling some other function');
}

<form name="myForm" onSubmit="return myFunctionName(event)">
  <input type="text" name="myText" required>
  <input type="submit" value="Click Me">
</form>

To use a regular expression with an input, use the pattern attribute:

function myFunctionName(e) {
  e.preventDefault();
  console.log('submitting...');
}

<form name="myForm" onSubmit="return myFunctionName(event)">
  <input id="postcode" name="postcode" required pattern="\d{6}">
  <input type="submit" value="Click Me">
</form>

edited Apr 14, 2020 at 9:20

answered Apr 13, 2020 at 8:28

Snow

4,1463 gold badges16 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

jrcollins Over a year ago

Thanks @Snow. What about if I needed to actually validate the input?

Snow Over a year ago

Depends on the type of validation. You might be able to use a regular expression. If not, then you'll have to do it manually. eg document.querySelector('input').value.includes('foo')

jrcollins Over a year ago

Ok, how would I include that in the above example?

jrcollins Over a year ago

I updated my code but still can't get it to work. Any idea what the problem is?

Snow Over a year ago

Use the pattern attribute instead

|

Collectives™ on Stack Overflow

How to validate form input then run function?

HTML

jQuery

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

HTML

jQuery

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related