Semantic UI onSuccess callback вызван даже при неудачной проверке формы

При отправке формы обратный вызов onSuccess по-прежнему вызывается, даже тогда проверка не выполняется.Semantic UI onSuccess callback вызван даже при неудачной проверке формы

Почему он вызывается, когда форма недействительна?

Пример здесь: https://jsfiddle.net/tL5xx6m9/7/

Отрывок:

Многословное объяснение, чтобы удовлетворить/соотношение текста кода для представления:

В этом фрагменте у меня есть текст, который получает письменный, когда OnSuccess события называется. Нажимая кнопку «Отправить», вы увидите, что форма недействительна и что текст onSuccess записывается. Под этим текстом находится bool для того, является ли форма действительной или нет, вызывая $(".ui.form").form('is valid').

 $(".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" 
 
      }] 
 
      } 
 
     } 
 
     });

<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>

источник

2016-01-11 Douglas Gaskell

Оказывается, что при наличии двух отдельных вызовов .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>

источник

2016-01-11 10:05:43

Semantic UI onSuccess callback вызван даже при неудачной проверке формы

ответ

Смежные вопросы