CODEWITHSUNDEEP
javascripthtmlvalidation
Dawid Pura
Dawid Pura

Reputation: 1029

How to modify HTML5 form data before validation?

I am trying to reuse HTML5 validation required in simple serach form (so one input). It's exactly what I need (validation message in browser's language, styling, not allowing to progress, etc.). What I missing is trimming input string so not allowing user to submit just whitespaces.

I made research already and onsubmit event seems to be too late triggered to modify anything. I can't also make any change of actual inputs, so those has to remain intact during whole process (like with classic validation).

Is there any way to solve it with vanilla HTML5 without using libs like jQuery?

Edit: Using pattern attribute is not a solution here because it has different error message than this field cannot be empty.

Upvotes: 2

Views: 329

Answers (2)

Manav
Manav

Reputation: 1367

You could try something along the lines of

<form method = "post">
    <input type = "text" required pattern=".*[^ ].*" oninvalid="setCustomValidity('Please fill out this field')"
    onchange="try{setCustomValidity('')}catch(e){}"/>
    <input type = "submit" />
</form>

Otherwise if you really, really need to use only the required attribute you something like this would work for you

<form method = "post">
    <input type = "text" required oninput = "if(this.value.trim() == '') { this.value = '' }"/>
    <input type = "submit" />
</form>

Upvotes: 4

CodeHacker
CodeHacker

Reputation: 2138

You can use onsubmit, You just need to return false if it doesn't validate

<form onsubmit="return check()">
  Enter name: <input type="text" id="myinput">
  <input type="submit">
</form>

<script>
 function check(){
  if(document.getElementById("myinput").value.trim().length ==0){
    return false;
  }
  return true;
 }
</script>

Upvotes: 1

Related Questions