添加引导错误类别验证

我在十月CMS中创建一个表单后形成场，想添加有错误类，如果有一个验证失败添加引导错误类别验证

<div class="form-group"> <label class="col-md-2 control-label">First Name</label> <div class="col-md-8 inputGroupContainer"> <div class="input-group"> <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span> <input name="first_name" placeholder="First Name" class="form-control" type="text" value="" required> </div> <p class="error">{{ errors.first('first_name') }} </p> </div> </div>

如何调用错误？ class =“{％if errors％} has-error {％endif％}”

来源

2016-12-06 Jaycbrf4

在Rainlab Relax Theme的“Contact Form”页面中有一个很好的例子。它使用了可以调整和修改您的用例的JQuery代码的一小部分。由于Rainlab放松例子主题下MIT license发表我想，这是为了贴在这里的JS代码，使用小JQuery的处理完全，让它为你找出内部运作，以及如何给它的方法调整到您的需求：

从文件assets/javascript/app.js在Rainlab放松主题：

/* 
* Implement nice invalid form fields 
*/ 
$(window).on('ajaxInvalidField', function(event, fieldElement, fieldName, errorMsg, isFirst) { 
    var $field = $(fieldElement).closest('.form-group'), 
     $help = $('<p />').addClass('help-block') 

    if (!$field.length) { 
     return 
    } 

    event.preventDefault() 

    if (errorMsg) { 
     $help.text(errorMsg.join(', ')) 
    } 

    $help.addClass('form-field-error-label') 
    $field.addClass('has-error') 

    // Prevent the next error alert only once 
    $(window).one('ajaxErrorMessage', function(event, message){ 
     event.preventDefault() 
    }) 

    if ($('.form-field-error-label', $field).length > 0) 
     return 

    $field.append($help) 

    // Scroll to the form group 
    if (isFirst) { 
     $('html, body').animate({ scrollTop: $field.offset().top }, 500, function(){ 
      fieldElement.focus() 
     }) 
    } 
})

总之，这捕获由十月框架时，在服务器端的表单处理程序抛出一个触发ajaxInvalidField事件ValidationException，即在此示例中（仍然来回米Rainlab放松主题代码）：

function onSubmit() 
{ 
    $rules = [ 
     'name'  => 'required|min:2|max:64', 
     'phone' => 'required', 
     'email' => 'required|email|min:2|max:64', 
     'comments' => 'required|min:5', 
    ]; 

    $validation = Validator::make(post(), $rules); 
    if ($validation->fails()) { 
     throw new ValidationException($validation); 
    } 
}

jQuery代码上方，然后基本上只是简单地防止了默认事件响应（以显示一个alert()错误消息），而是附加含有在适当的验证错误消息的<p class="help-block form-field-error-label" />一个封闭<div class="form-group" />内结束，你需要在你的周围输入这个例子，也是有错误类添加到<div class="form-group" />，那可能是这里没有必要深究细节的一些额外的细节。

我想你大概可以计算出你从那里需要什么。 HTH。 Jquery的的:)

来源

2016-12-08 19:15:22 trollkotze

仍不能得到它的工作。只是得到警报，现场表演不是空的没有错误类 – Jaycbrf4

哦，你是对的。对不起。我的结论是错误的。这个魔法并不是在10月份内建的，而是实际上是通过一些JQuery代码添加到我所指的[Rainlab Relax主题]（https://octobercms.com/theme/rainlab-relax）中的JavaScript文件中。我会更新我的答案，并包含JS代码，它实际上非常短而且整洁，并且非常确定可以根据需要重用和调整。 – trollkotze

我已经更新了我的答案，@ Jaycbrf4。希望这会对你有所帮助。 – trollkotze

我此脚本通过更改标记工作从

<p class="error">{{ errors.first('first_name') }} </p>

到

<p class="help-block"></p>

和变线6成

$help = $('.help-block');

您的标记ISN”完成，所以很难说你的问题在这里。您是否使用AJAX提交此表单，是否包含正确的脚本，您的验证规则是什么等等？

来源

2017-03-05 12:52:24 Abel

你可以用小树枝。假设你会想“具有错误”类添加到您的

<div class="form-group">

只是重写到

<div class="form-group{{ errors.first('first_name') ? ' has-error' : '' }}">

大功告成;不需要JavaScript！

来源

2017-05-11 16:19:57

添加引导错误类别验证

回答

相关问题