Is there a way to simulate messages of "required-elements" before a form is submitted?

Question

I'm using html5's required attribute on input-elements in a form. Normally when you use them and submit the form you get a message which element(s) are invalid.

I'm in a special situation which requires me to test the state of the input fields before posting. (If they are all ok, then someone elses code (another plugin in Wordpress) is fired by use of simulating a click on another submit element.)

Here's a snippet of relevant jQuery-code:

var t = $(this);
found_required = false;
 $("input").each(function() {
 if ( $(this).hasClass('required') ) {
    if ($(this).is(":invalid")) {
        t.removeClass('swishmode');                    
        //Tell user this element is required
        found_required = true;
    }
}
});        

if ( found_required == true ) {
    $('form.give-form').attr('action','Javascript:void();'); //Just an attempt
    $(this).click(); //Just an attempt
    return; //Returns user back to form without doing different things below 
}   

//Code to do different things...

My question is - is there a way to show default error like it would be shown when submitting a form with invalid data? (or do you have to write custom error handling for this purpose)

The actual code works as I have it right now, but the user gets no indication that what fields are incorrect. I know I could just put some style of those input elements and I will do so if this above is not possible.

score 1 · Answer 1 · answered Aug 26 '18 at 18:13

There are any number of ways to handle form validation.

However, I think you need to add some sort of event listener on either the input, change, or blur event that will validate the input and display a message if invalid. See: https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Form_validation#Validating_forms_using_JavaScript for very helpful examples on using the constraint validation API.

They also link to a polyfill.

Here's an example on the input event:

var email = document.getElementById('mail');
var error = document.querySelector('.error');

email.addEventListener("input", function (event) {
  // Each time the user types something, we check if the
  // email field is valid.
  if (email.checkValidity()) {
    // In case there is an error message visible, if the field
    // is valid, we remove the error message.
    error.innerHTML = ""; // Reset the content of the message
    error.className = "error"; // Reset the visual state of the message
  } else {
    error.innerHTML = "Please enter a valid email.";
    error.className = "error active";
  }
}, false);

input[type=email]{
  -webkit-appearance: none;

  width: 100%;
  border: 1px solid #333;
  margin: 0;

  font-family: inherit;
  font-size: 90%;

  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

/* This is our style for the invalid fields */
input:invalid{
  border-color: #900;
  background-color: #FDD;
}

input:focus:invalid {
  outline: none;
}

/* This is the style of our error messages */
.error {
  width  : 100%;
  padding: 0;
 
  font-size: 80%;
  color: white;
  background-color: #900;
  border-radius: 0 0 5px 5px;
 
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.error.active {
  padding: 0.3em;
}

<label for="mail">Enter Email Address:</label>
<input id='mail' type='email' name='mail' required >
<span class="error" aria-live="polite"></span>

Is there a way to simulate messages of "required-elements" before a form is submitted?

1 Answers1