7

I want to achieve something like this without form post, as it will redirect the page. enter image description here

here is my code

<form>
  <input type="number" step="any" min="0" required oninvalid="this.setCustomValidity('Please enter price with decimal format, eg x.xx .')">
  <button type="submit">submit</button>
</form>

I've did some research it seems like it has to be triggered with form post. Possible to trigger the html5 validtion with jquery function button click ?

Flimm
  • 136,138
  • 45
  • 251
  • 267
Darren Lau
  • 1,995
  • 4
  • 25
  • 40
  • Does this answer your question? [How to show setCustomValidity message/tooltip without submit event](https://stackoverflow.com/questions/12785347/how-to-show-setcustomvalidity-message-tooltip-without-submit-event) – Flimm Jul 28 '20 at 14:57

2 Answers2

1

Set a custom validation message on input change and intercept the form submit event:

var form = document.querySelector('form'),
    input = document.querySelector('#input-price');

input.addEventListener("change", function (event) {
  if (!input.checkValidity() || !/^\d+(\.\d+)?$/.test(input.value)) {
    input.setCustomValidity("Please enter price with decimal format, eg x.xx .");
  } else {
    input.setCustomValidity("");
  }
});

form.addEventListener("submit", function (event) {
  event.preventDefault();
});
<form>
  <input id="input-price" type="number" step="any" min="0" required>
  <input type="submit">
</form>

input.checkValidity() returns true when the input value is a number as in 2, .1 and 1e10. The regex test then filters the two last cases (.1 and 1e10) out.

le_m
  • 19,302
  • 9
  • 64
  • 74
  • [Documentation for `checkValidity`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement#Methods) – Flimm Jul 28 '20 at 14:55
0

the html5 “pattern” attribute doesn't work in all Browsers

the only way is to use JavaScript code

try this code

Html 

<input id="amount" maxlength="7" type="text" />

javaScript

$("#amount").on("keyup", function(){
    var valid = /^\d{0,4}(\.\d{0,3})?$/.test(this.value),
        val = this.value;

    if(!valid){
        alert("Please enter price with decimal format, eg x.xx!");
        this.value = val.substring(0, val.length - 1);
    }
});

to avoid accepting invalid input when pasting text (idea of @le_m)

try this second solution :

html 

<input id="amount" maxlength="7" type="text" />

JS

$("#amount").on("change paste keyup", function(){
    var valid = /^\d*(\.\d*)?$/.test(this.value),
        val = this.value;

    if(!valid){
        alert("Please enter price with decimal format, eg x.xx!");
        this.value = val.substring(0, val.length - 7);
    }
});

result : http://jsfiddle.net/vY39r/866/

Taha
  • 1,072
  • 2
  • 16
  • 29
  • 1
    Have a look at http://stackoverflow.com/questions/37390665/html-input-that-takes-only-numbers-and-the-symbol to avoid accepting invalid input when pasting text or holding a key down. – le_m Jun 08 '16 at 01:16
  • the problem of pasting text is fixed but when holding '2' for example it accept '2222222' . I test onblur and onfocusout but it doesn't solve the problem – Taha Jun 08 '16 at 13:10