Question

我有一个表单要求用户提供一些输入值。对于一些初始输入，我正在使用javascript进行自定义验证。在表单的末尾，使用＆＃34; html required属性＆＃34;验证一个字段。但是当用户点击提交按钮时，具有所需属性的输入框首先显示消息而不是给予先前的消息，即不按照错误显示的顺序。下面我添加了代码和图像，而不是显示该名称为空它直接跳转到位置输入框。这只会让最终用户感到困惑。为什么会出现此问题以及如何解决？

＆＃13;

<html>
<head>
<script>
  function validate(){
    var name = document.forms['something']['name'].value.replace(/ /g,"");
    if(name.length<6){
       document.getElementById('message').innerHTML="Enter correct name";
       return false;
    }
  }
</script>
</head>

<body>

<form name="something" action="somewhere" method="post" onsubmit="return validate()">
  <div id="message"></div>
  Enter Name : <input type="text" name="name" /> <br/> <br/>
  Enter Location : <input type="text" name="location" required="required" /> <br/> <br/><br/> <br/>
  <input type="submit" name="submit" />
</form>

</body>

</html>

＆＃13;

Answer 1

这可能只是由于位置输入中的required属性而触发的HTML5表单验证。

因此，一个选项是在名称上设置required属性。并使用novalidate属性禁用HTML5验证。有关详细信息，请参阅此处：https://stackoverflow.com/a/3094185/2008111

<强>更新

因此，更简单的方法是在名称上添加required属性。以防有人在他/她输入任何内容之前提交表格。原因HTML5验证将在其他任何事情之前触发。另一种方法是在任何地方删除required属性。所以这样的事情。现在，只要名称输入失去了焦点onblur，就会触发javascript验证。

＆＃13;

var nameElement = document.forms['something']['name'];

nameElement.onblur = function(){
    var messageElement = document.getElementById('message');
    var string = nameElement.value.replace(/ /g,"");
	  if(string.length<6){
       messageElement.innerHTML="Enter correct name";
    } else {
        messageElement.innerHTML="";
    }
};

＆＃13;

<form name="something" action="somewhere" method="post">
  <div id="message"></div>
  Enter Name : <input type="text" name="name" required="required" /> <br/> <br/>
  Enter Location : <input type="text" name="location" required="required" /> <br/> <br/><br/> <br/>
  <input type="submit" name="submit" />
</form>

＆＃13;

现在上述工作正常我猜。但是想象一下，除了要观察的元素和错误消息之外，您可能需要在多个地方使用该功能。当然，可以更多地显示消息的位置等。这只是为了让您了解如何使用相同的功能设置更多场景：

＆＃13;

var nameElement = document.forms['something']['name'];
nameElement.onblur = function(){
    validate(nameElement, "Enter correct name");
};

function validate(element, errorMessage) {
    var messageElement = document.getElementById('message');
    var string = element.value.replace(/ /g,"");
	  if(string.length < 6){
       messageElement.innerHTML= errorMessage;
    } else {
        messageElement.innerHTML="";
    }
}

＆＃13;

<form name="something" action="somewhere" method="post">
  <div id="message"></div>
  Enter Name : <input type="text" name="name" required="required" /> <br/> <br/>
  Enter Location : <input type="text" name="location" required="required" /> <br/> <br/><br/> <br/>
  <input type="submit" name="submit" />
</form>

＆＃13;

HTML5验证在自定义验证之前执行

1 个答案: