验证引擎弹出窗口不适用于需要html5的提交

Question

我在表单中使用了html5属性'required‘。以下是代码片段

​

$('form').validationEngine('attach', {
  promptPosition: "centerRight",
  scroll: false,
  binded: false,
  onValidationComplete: function(form, status) {
    if (status == true) {

    } else {
      // foo; 
    }
  }
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/jQuery-Validation-Engine/2.6.4/validationEngine.jquery.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-Validation-Engine/2.6.4/jquery.validationEngine.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-Validation-Engine/2.6.4/languages/jquery.validationEngine-en.js"></script>
<form method="post">
  <input type="text" id="nameIt1" name="nameIt" placeholder="Product name..." class="text validate[required] nameIt" required="required">
  <input type="submit" value="Submit" class="button yellow">
</form>

​

在这里，将出现html5原生验证弹出窗口，而不是验证引擎弹出窗口。如果我删除了html5属性'required‘，代码就能正常工作。

专家们，请对此进行遮蔽。

提前谢谢。

Ganesh

Answer 1

实际上，如果这段代码的主要目的是验证所需的文本字段，那么您的代码可以很好地工作，因为我已经在我的机器上测试了它。必须存在required属性，才能使该字段成为本机required html5。甚至不需要将该属性设置为任何值，只需如下所示：

<input type="text" id="nameIt1" name="nameIt" placeholder="Product name..." class="text validate[required] nameIt" required >

而且它会工作得很好。如果删除该属性，表单将回发特定代码中的空字段。但是，如果您对javascript函数进行了一些更改，那么您将注意到验证引擎弹出，在这种情况下，不需要所需的属性。如下所示：

$('form').validationEngine('attach', {
    promptPosition: "centerRight",
    scroll: false,
    binded: false,
    onValidationComplete: function (form, status) {
        if (status == true) {
            form.validationEngine('detach');
            form.submit();
            alert('it is Ok');
        } else {
            alert('Not OK');
        }
    }
});

我希望这能有所帮助。