Question

提交表单时，仍会调用onSuccess回调，即使验证失败也是如此。

为什么在表单无效时调用它？

段：

详细解释以满足提交的代码/文本比率：

在这个片段中，我有调用onSuccess事件时写入的文本。通过单击提交，您将看到表单无效，并且onSuccess文本被写入。在该文本下，通过调用$(".ui.form").form('is valid')来确定表单是否有效。

＆＃13;

       $(".ui.form").form({
         onSuccess: function(event, fields) {
           SubmitForm(fields);
           event.preventDefault();
         }
       });

       //Processes the forms data for a submission
       function SubmitForm(fields) {
       var valid = $(".ui.form").form('is valid');
         $('#successText').html("On Success Called" + "<br> Is Valid: " + valid);
         console.log("Submitting Form");
         console.log(fields);
       }

       $('.ui.form').form({
         fields: {
           input1: {
             identifier: 'input1',
             rules: [{
               type: "empty",
               prompt: "input1 - This field is required"
             }]
           },
           input2: {
             identifier: 'input2',
             rules: [{
               type: "empty",
               prompt: "input2 - This field is required"
             }]
           }
         }
       });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.min.js"></script>

<form class="ui form attached fluid segment">
  <div class="field">
    <input name="input1" type="text" placeholder="input1" id="testRemoveField">
  </div>
  <div class="field">
    <input name="input2" type="text" id="" placeholder="input2">
  </div>
  <button class="ui teal button" type="submit">Submit</button>
  <div class="ui error message"></div>
  <div id="successText">
  
  </div>
</form>

＆＃13;

Answer 1

看起来通过两次单独的.form()方法调用，它会创建两个彼此独立执行的验证检查。所以没有规则的第一次通话总是会成功的。

将onSuccess事件移至与验证规则相同的调用，并开始按预期工作。

//Processes the forms data for a submission
function SubmitForm(fields) {
  var valid = $(".ui.form").form('is valid');
  $('#successText').html("On Success Called" + "<br> Is Valid: " + valid);
  console.log("Submitting Form");
  console.log(fields);
}

$('.ui.form').form({
  fields: {
    input1: {
      identifier: 'input1',
      rules: [{
        type: "empty",
        prompt: "input1 - This field is required"
      }]
    },
    input2: {
      identifier: 'input2',
      rules: [{
        type: "empty",
        prompt: "input2 - This field is required"
      }]
    }
  },
  onSuccess: function(event, fields) {
    SubmitForm(fields);
    event.preventDefault();
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.min.js"></script>

<form class="ui form attached fluid segment">
  <div class="field">
    <input name="input1" type="text" placeholder="input1" id="testRemoveField">
  </div>
  <div class="field">
    <input name="input2" type="text" id="" placeholder="input2">
  </div>
  <button class="ui teal button" type="submit">Submit</button>
  <div class="ui error message"></div>
  <div id="successText">

  </div>
</form>

即使表单验证失败，也会调用语义UI onSuccess回调

1 个答案: