添加引導錯誤類別驗證

我在十月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

添加引導錯誤類別驗證

回答

相關問題