Create a submit button 2 functions

l would like the submit button to do two actions, when the user clicks the button it will either link to another html file or display a message e.g. If user types YES
( will link to page that says correct)

If user types YEO(will display message that says, wrong.
How do you do this? Thanks, Angela Jackson

If there can be different words typed in the same input field, like words spelled right or wrong, I think you need a script to evaluate the input. That could be either client-side with Javascript or server-side using e.g. PHP.

If so, the topic can be moved to a better suited department.

Hi @jackson108, you’d actually prevent the default action (submitting the form) altogether if validation fails; and for the basic behavior you don’t even need JS but just HTML constraint attributes:

<form action="success.html">
  <label>
    Enter YES:
    <input type="text" required pattern="^YES$">
  </label>
  
  <button>Submit</button>
</form>

JS can then be used to enhance the UX by implementing your own error reporting, for example; to prevent the browser default messages, add a novalidate attribute to the form:

<form novalidate action="success.html">
  <label>
    Enter YES:
    <input type="text" required pattern="^YES$">
  </label>

  <button>Submit</button>
</form>

And then check the form validity with JS when the user attempts to submit the form:

const form = document.querySelector('form')

form.addEventListener('submit', event => {
  event.preventDefault()

  if (form.checkValidity()) {
    form.submit()
  } else {
    alert('You must enter YES!')
  }
})

You can read more on this topic here:

PS: Just keep in mind that client-side validation can never replace server-side validation, it’s only suitable to give the user a more immediate feedback – as @Erik_J noted, this might have to be addressed elsewhere.

4 Likes

Thanks

Can you put this code in code pen?
Thanks

A code pen will only work partially as you can’t submit a form there, but you can see the validation in action by just copy / pasting the HTML to the HTML area, and (for the JS-enhanced version) the JS to the JS area.

1 Like

Ok I will
Thanks

Ok I see the validation working but how can I change the text of the pop up box, it says now" Please match the requested format".

You can either disable the automatic browser validitation altogether (using the novalidate attribute as mentioned above) and implement your own reporting; or if you want to keep the native popups, you can set a custom validity message like so:

<input id="my-input" type="text" required pattern="^YES$">
const input = document.getElementById('my-input')

input.addEventListener('input', () => {
  // Set a custom validity message if the current
  // input value does not satisfy the pattern
  // constraint as defined in the markup
  if (input.validity.patternMismatch) {
    input.setCustomValidity('Please enter YES!')
  } else {
    input.setCustomValidity('')
  }
})

This is also explained in more detail here in the MDN article from above.

1 Like