在提交之前听取语义UI表单验证错误

使用语义UI表单，模态和验证，我有一个模式的表单，如果表单无效（在提交时发生），我不希望模式关闭。在提交之前听取语义UI表单验证错误

我可以阻止模式关闭的唯一方法是将disabled类添加到提交按钮。

我想根据当前表单验证状态来实时地收听表格并切换disabled类。

我只能得到一次形式实时提交，但不

$('#myForm') 
    .form({ 
     title: { 
      identifier : 'title', 
      rules: [ 
       { 
        type : 'empty', 
        prompt : 'Please enter a title' 
       }, 
       { 
        type : 'length[2]', 
        prompt : 'At least 6 characters' 
       } 
      ] 
     } 
    }, 
    { 
     onSuccess: function() { 
      $('#submit').removeClass('disabled'); 
     }, 
     onFailure: function() { 
      $('#submit').addClass('disabled'); 
     } 
    } 
);

来源

2015-05-04 Jack Barham

而不是使用禁用的提交它的工作，确保模撑打开即使点击提交（莫代尔批准）按钮，并将决定关闭模式到语义UI表单验证事件（即onSuccess）。

所以类似这样的东西：

$('.ui.modal').modal({ 
     onApprove : function() { 
      //Submits the semantic ui form 
      //And pass the handling responsibilities to the form handlers, 
      // e.g. on form validation success 
      $('.ui.form').submit(); 
      //Return false as to not close modal dialog 
      return false; 
     } 
    }); 

var formValidationRules = 
{ 
    title: { 
     identifier : 'title', 
     rules: [ 
      { 
       type : 'empty', 
       prompt : 'Please enter a title' 
      }, 
      { 
       type : 'length[2]', 
       prompt : 'At least 6 characters' 
      } 
     ] 
    } 
} 

var formSettings = 
{ 
    onSuccess : function() 
    { 
     //Hides modal on validation success 
     alert("Valid Submission, modal will close."); 
     $('.modal').modal('hide'); 
    } 
} 

$('.ui.form').form(formValidationRules, formSettings);

注意，“OnApprove”事件，当你点击与类“确定”按钮，模式仅火灾。因此，你需要像这样一个模式按钮：

<div class="ui ok green basic inverted button"> 
    <i class="checkmark icon"></i> 
    Submit 
</div>

这里有一个扩展的工作plunker代码，我创建证明这一点： http://plnkr.co/edit/5fK7UuJIm7QTJGiu23NL?p=preview

来源

2015-05-07 07:16:04 Oniisaki

这是完美的 - 正是我需要的 –

您可以使用语义UI API，以防止提交表单。

$('.submit.button').api({ 
    beforeSend: function(settings) { 
     return false; 
    } 
});

来源

2015-05-19 14:23:00 cuixiping

我遇到了同样的问题，并与语义开发人员联系。请注意，他们将在2.0发布后重新访问一些额外的，明显的，缺失的表单行为。现在你可以看看他们的GitHub库（该form.js文件）这个分支： https://github.com/Semantic-Org/Semantic-UI/tree/next

利用一个权宜之计功能is valid如果形式验证返回true/false。

例如

if ($('form').form('is valid')) { 
    // do something 
}

这将是2.0

来源

2015-06-10 13:45:25 DruidKuma

从@DruidKuma和@Oniisaki解决方案的结合为我工作：

var formValidationRules; 

$(function() { 
    return $('.ui.modal').modal({ 
    onApprove: function() { 
     if ($('.ui.form').form('is valid')) { 
     return true; 
     } else { 
     return false; 
     } 
    } 
    }); 
}); 

formValidationRules = { 
    fields: { 
    name: 'empty' 
    } 
    // Additional validation fields would go here 
}; 

$(function() { 
    return $('.ui.form').form(formValidationRules); 
});

要阐述的onApprove回调，要知道，除了到由@DruidKuma表示的.ok（技术上.action .ok类别选择器）.action .positive和.action .approve的附加类别选择器也将触发onApprove。

来源

2015-10-24 15:32:26

我知道这是一个旧帖子，现在可能已经改变了。以上所有解决方案都不适用于我，因为他们的立场，我找不到任何地方的失踪片。这是我终于明白了：

$("#myModal").modal({ 
    onApprove: function(e){ 
     $('#myModal .ui.form').submit(); 
     if (!$('#myModal .ui.form').form('is valid')) { 
      return false; 
     } 

     // Process the form data 

     return true; 
    } 
});

我希望它可以帮助别人。

来源

2017-10-11 03:47:18

在提交之前听取语义UI表单验证错误

回答

相关问题