Question

我之前发布了一条类似的消息，关于不同的javascript / jquery表单验证库。一群人说我使用的图书馆太旧了所以我决定改用欧芹。我能够进一步使用欧芹，但它仍然没有按预期工作。如果您在最初提交表单时注意到类在select上发生更改，但在select更改后，成功类永远不会添加到select中，并且永远不会清除错误。有没有人知道为什么在填充表单后错误类没有被成功类替换？

我做了一个jsfiddle，我注意到代码片段没有用。 https://jsfiddle.net/1wxsbaq4/

 <html>

  <head>
<style>
input.parsley-success,
select.parsley-success,
textarea.parsley-success {
  color: #468847;
  background-color: #DFF0D8;
  border: 1px solid #D6E9C6;
}

input.parsley-error,
select.parsley-error,
textarea.parsley-error {
  color: #B94A48;
  background-color: #F2DEDE;
  border: 1px solid #EED3D7;
}

.parsley-errors-list {
  margin: 2px 0 3px;
  padding: 0;
  list-style-type: none;
  font-size: 0.9em;
  line-height: 0.9em;
  opacity: 0;

  transition: all .3s ease-in;
  -o-transition: all .3s ease-in;
  -moz-transition: all .3s ease-in;
  -webkit-transition: all .3s ease-in;
}

.parsley-errors-list.filled {
  opacity: 1;
}
</style>
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.13/components/dropdown.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.13/components/transition.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/parsley.js/2.8.0/parsley.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.13/components/dropdown.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.13/components/transition.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.blockUI/2.70/jquery.blockUI.min.js"></script>
    <script>
      $(function() {
        $('#identifier').dropdown();
        $('#ticketform').parsley();
  });
    </script>
  </head>
  <body>
    <br/>
    <br/>
                        <form id="ticketform" name="ticketform" action="open_ticket.php" method="post">

    <div class="container">
        <div class = "row">
                <div class="col-md-4">
                        <input type="hidden" name="action" value="submit">
                        <p>Please select or enter an IP address:</p>
                </div>
                <div class ="col-md-4">  
                <select name="identifier" class="ui search selection dropdown" id="identifier" data-parsley-errors-container="#select-errors" required="">  
                        <option value="">Please enter or select IP address</option>
                        <option value="4.4.4.4">4.4.4.4</option>
                        <option value="8.8.8.8">8.8.8.8</option>
                </select>
                </div>
        <div class="col-md-4">
                <div id="select-errors"/>
`       </div>
        </div>
      <div class = "row">
        <div class = "col-md-4">
                <input id="button" type="submit" name="btnsubmit" value="Submit ticket" class="uibutton normal">
       </div>
      </div>
    </div>
</div>
                </form>
  </body>

</html>

Answer 1

看起来Parsley与您正在使用的下拉列表之间的互动很糟糕。

可能是因为您使用的下拉列表不符合规范，并且在修改后不会触发input事件？

ParsleyJS从未检测到成功

1 个答案: