javascript - SetCustomValidity not working

I am trying to create a custom error message when a number which is too high or low is entered in the "size" element. However, I am unable to make this work. I am a beginner so a solution which involves the least changes to my existing code would be most appreciated.

function autoFillcost() {
  var size = document.getElementById("size").value;
  if (size <= 25)
    document.getElementById("cost").value = "£100";
  else if (size >= 26 && size <= 50)
    document.getElementById("cost").value = "£200";
  else
    document.getElementById("cost").value = "£300";
}

function sizeValidate() {
  var size = document.getElementById("size");
  if (!size.checkValidity()) {
    size.setCustomValidity("ERROR!");
  } else {
    size.setCustomValidity("");
  }
}

<script src=".9.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<body>

  <form>

    Group Size:<input type="number" min="6" max="200" id="size" onblur="autoFillcost();sizeValidate();" required>

    <p>Cost:<input type="text" id="cost"></p>

    <p id="demo"></p>

  </form>

</body>

</html>

function autoFillcost() {
  var size = document.getElementById("size").value;
  if (size <= 25)
    document.getElementById("cost").value = "£100";
  else if (size >= 26 && size <= 50)
    document.getElementById("cost").value = "£200";
  else
    document.getElementById("cost").value = "£300";
}

function sizeValidate() {
  var size = document.getElementById("size");
  if (!size.checkValidity()) {
    size.setCustomValidity("ERROR!");
  } else {
    size.setCustomValidity("");
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<body>

  <form>

    Group Size:<input type="number" min="6" max="200" id="size" onblur="autoFillcost();sizeValidate();" required>

    <p>Cost:<input type="text" id="cost"></p>

    <p id="demo"></p>

  </form>

</body>

</html>

Share Improve this question edited Jul 10, 2018 at 12:56 Code_Ninja 1,8671 gold badge17 silver badges39 bronze badges asked Jul 10, 2018 at 10:39 Peter 1031 gold badge1 silver badge4 bronze badges

Add a comment |

2 Answers 2

Sorted by: Reset to default 11

Sorry for digging, but it is possible, just report it after you set it.

Hopefully this helps others.

if (!size.checkValidity()) {
    size.setCustomValidity("ERROR!");
    size.reportValidity();
}

The problem with setCustomValidity is, that it does only work once you submit the form.

function autoFillcost() { 
var size = document.getElementById("size").value;
if (size <= 25)
document.getElementById("cost").value = "£100";
else if (size >= 26 && size <= 50)
document.getElementById("cost").value = "£200";
else
document.getElementById("cost").value = "£300";
}

function sizeValidate() {
var size = document.getElementById("size");

    if (!size.checkValidity()) {

        size.setCustomValidity("ERROR!");
    } else {
        size.setCustomValidity("");

    } 
}

button {
	padding:6px; 
	cursor:pointer;
}
input {
	padding:5px; 
	border:1px solid #aaa;
    box-shadow: 0px 0px 3px #ccc, 0 10px 15px #eee inset;
    border-radius:2px;
}
input:valid {
	background-color: white;
}
input:invalid {
	background-color: lightpink;
}

<form>

Group Size:<input type="number" min="6" max="200" id="size"  onblur="autoFillcost();sizeValidate();" required />

<p>Cost:<input type="text" id="cost"></p>

<p id="demo"></p>
<button type="submit">Submit</button>
</form>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - SetCustomValidity not working - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)