Question

当在“大小”元素中输入太高或太低的数字时，我试图创建一个自定义错误消息。但是，我无法使这项工作。我是一个初学者，因此，对包含对我现有代码的最少更改进行更改的解决方案将是最好的。

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>

Answer 1

setCustomValidity的问题在于，它仅在您提交表单后才起作用。

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>

SetCustomValidity不起作用

1 个答案: