Question

我在10月CMS中创建了一个表单，如果验证失败，我想添加has-error类

<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％}”

Answer 1

在Rainlab Relax Theme中，在“联系表单”页面上有一个很好的例子。它使用了一小部分JQuery代码，可以根据您的用例进行调整和修改。由于Rainlab Relax示例主题是在MIT license下发布的，我认为这是为了在这里完整地粘贴用于使用的小JQuery处理程序的JS代码，并留下它来找出内部工作方式以及如何调整它的方法满足您的需求：

来自Rainlab Relax主题中的文件assets/javascript/app.js：

/*
 * 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()
        })
    }
})

简而言之，当服务器端的表单处理程序抛出 ValidationException 时，这会捕获由October Framework触发的 ajaxInvalidField 事件，即在此示例中（仍然来自Rainlab Relax主题代码）：

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" />，并将 has-error 类添加到<div class="form-group" />，以及此处可能不需要的一些其他详细信息详细了解。

我想你可以从中找出你需要的东西。 HTH。：）

Answer 2

我通过更改

标记来使用此脚本

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

到

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

并将Jquery的第6行更改为

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

您的加价工作尚未完成，因此很难说出您的问题所在。您是否正在使用AJAX提交此表单，是否正确包含了脚本，您的验证规则是什么等等？

验证后，将Bootstrap错误类添加到表单字段

2 个答案: