Question

我正在尝试使此欧芹验证一次只显示一条错误消息，用于确认电子邮件字段。我尝试了各种选项，默认情况下priorityEnabled也设置为true。但是，仍会显示两条消息以确认电子邮件消息。

<!Doctype html>
<html>

<head>

<style>
#fullnameErr {
    display: inline-block;
}

</style>

<script src="jquery.js"></script>
<script src="parsley.js"></script>

</head>

<body>

<form id="demo-form" data-parsley-validate>

  <!-- this field is just required, it would be validated on form submit -->
  <label for="fullname">Full Name * :</label>
  <input type="text" name="fullname" data-parsley-trigger="change" data-parsley-length="[1,6]" data-parsley-errors-container="#fullnameErr" required />
  <div id="fullnameErr"></div>

  <!-- this required field must be an email, and validation will be run on
  field change -->
  <label for="email">Email * :</label>
  <input type="email" id="emailid" name="email" data-parsley-trigger="change" required />


   <label for="email">Confirm Email * :</label>
  <input type="email" name="email" data-parsley-trigger="change"  data-parsley-equalto= "#emailid" required data-parsley-stop-on-first-failing-constraint="true" />

  <!-- radio and checkbox inputs by default have to be wrapped in a parent
  elemnt (here <p>) that will have success and error classes -->
  <label for="gender">Gender *:</label>
  <p>
    M: <input type="radio" name="gender" id="genderM" value="M" required />
    F: <input type="radio" name="gender" id="genderF" value="F" />
  </p>

  <!-- here, field is not required, it won't throw any error if no checkbox
  is checked. But if checked, two at least must be checked -->
  <label for="hobbies">Hobbies (2 minimum):</label>
  <p>
    Skiing <input type="checkbox" name="hobbies" value="ski" data-parsley-mincheck="2" />
    Running <input type="checkbox" name="hobbies" value="run" />
    Eating <input type="checkbox" name="hobbies" value="eat" />
    Spleeping <input type="checkbox" name="hobbies" value="sleep" />
    Reading <input type="checkbox" name="hobbies" value="read" />
    Coding <input type="checkbox" name="hobbies" value="code" />
  <p>


  <!-- regular select input. Nothing more to add. -->
  <label for="heard">Heard us by *:</label>
  <select id="heard" required>
    <option value="">Choose..</option>
    <option value="press">Press</option>
    <option value="net">Internet</option>
    <option value="mouth">Word of mouth</option>
    <option value="other">Other..</option>
  </select>

  <!-- this optional textarea have a length validator that would be checked on keyup after 10 first characters, with a custom message only for minlength validator -->
  <label for="message">Message (20 chars min, 100 max) :</label>
  <textarea name="message" data-parsley-trigger="keyup" data-parsley-length="[20, 100]" data-parsley-validation-threshold="10" data-parsley-minlength-message = "Come on! You need to enter at least a 20 caracters long comment.."></textarea>

  <input type="submit" />
</form>
<body>

</html>

Answer 1

根据您的要求，第二个字段用于重新确认用户在第一个电子邮件输入中输入的email-d。因此，在第二个电子邮件输入中，您应该只使用 data-parsley-equalto ，而不是 type =“email”。

因为在第二个输入上设置 type =“email”会导致输入验证有效的电子邮件ID。这是两条消息的原因。您可以将代码设为：

<!-- this required field must be an email, and validation will be run on
  field change -->
  <label for="email">Email * :</label>
  <input type="email" id="emailid" name="email" data-parsley-trigger="change" required/>

   <label for="email">Confirm Email * :</label>
  <input name="email" data-parsley-trigger="change"  data-parsley-equalto= "#emailid" required  />

因此，当您更改第二个输入中的值时，它将被验证为与第一个输入字段中的值相同，而不是有效的电子邮件ID。

parsley js validation - 确定验证约束和自定义错误消息的优先级

1 个答案: