2013-03-19 83 views
0

我有一個像驗證選擇字段

<div class='form-field-box even' id="one_field_box"> 
    <div class='form-display-as-box' id="one_display_as_box"> 
     one<span class='required'>*</span> : 
    </div> 
    <select id='one' name='one' data-placeholder="Select one" class="chzn-select" style="width:300px;" tabindex="4"> 
     <option value='0'></option> 
     <option value='Corto' selected='selected' >Corto</option> 
     <option value='Largo' >Largo</option> 
    </select>    
    <div class="form-error"></div> 
    <div class='clear'></div> 
</div> 

而且我有一個腳本的HTML:

function validate(id, error) { 
    var obj = $('#' + id); 
    if(obj.val() == '0' || obj.val() == ''){ 
     obj.parent().parent().find('.form-error').html(error); 
     return true; 
    } 
return false; 
} 

我調用這個函數:

validate('one', "error in field one."); 

我不是得到正確的導航,你能幫我糾正validate()函數嗎?

+1

你是什麼意思「我沒有得到正確的導航」?你有什麼錯誤或者你認爲應該發生什麼? – j08691 2013-03-19 21:13:13

+0

以及郵件錯誤不顯示,因爲它沒有找到正確的id =「one」 – cMinor 2013-03-19 21:17:58

+0

@cMinor - >如果你不能找到正確的id =「one」請確保你在選擇過程中使用jquery $('#'+ id,'idofthecontext') – PSL 2013-03-19 21:25:24

回答

1

因爲它看起來像你使用一些約定與Y我們的ID我會只是構建表單ID找到它的範圍內。

if(obj.val() === '0' || obj.val() === ''){ 

    $("#" + id + "_field_box .form-error").html(error) 
    return true; 
} 

增加的好處是,如果你改變你的選擇的位置,你不會打破驗證邏輯。

更新 我也想即使將來你打算在你的下拉菜單,這仍然會工作再添包裝推薦使用全等

+0

如何傳遞id參數或函數知道我需要'id =「one」'來舉例... – cMinor 2013-03-19 21:19:47

+0

不確定你在問什麼,但你的**驗證**函數有一個** ID **參數,所以我用它來構造表單ID。你是說你沒有id參數嗎? – awbergs 2013-03-19 21:21:39

+0

沒有等待,我測試了它的工作完美,非常感謝你 – cMinor 2013-03-19 21:33:57

1

您可以嘗試獲取正確的目標錯誤消息容器。 並且您需要使用任何事件處理程序觸發validate()方法。

我認爲你需要開槍select變化的驗證功能:

$('select.chzn-select').on('change', function() { 
    validate(this.id, 'error in field '+ this.id +'.'); 
}); 


obj  // select#one 
.parent() // div.form-field-box 
.find('.form-error') // error viewer 
.html(error); 

或者

obj  // select#one 
.next() // div.form-field-box 
.find('.form-error') // error viewer 
.html(error); 
1

確保您某些事件後調用validate(),例如。 changesubmit等等

見琴:http://jsfiddle.net/amyamy86/9CC2b/

此外,使用===嚴格的比較:

if (obj.val() === '0' || obj.val() === '') { 

要爲一組元素做驗證,說<select class="validateMe">上點擊一個按鈕:

function validate(id, error) { 
    var obj = $('#' + id); 
    if (obj.val() === '0' || obj.val() === '') { 
     obj.parent().parent().find('.form-error').append('<p>' + error + '</p>'); 
     return true; 
    } 
    return false; 
} 

$('#validate').click(function() { 
    $('.form-error').html(''); // clear existing errors 
    $('select.validateMe').each(function() { 
     var select = $(this); 
     var id = $(this).attr('id'); // get id of each select 
     validate(id, 'error in field ' + id); 
    }); 
}); 
+0

我怎麼能調用這個來驗證幾個字段取決於id? – cMinor 2013-03-19 21:20:52

+0

@cMinor我添加一個選擇器來輕鬆找到要驗證的元素,然後通過'validate()'函數運行它們中的每一個。請參閱http://jsfiddle.net/amyamy86/9CC2b/ – sweetamylase 2013-03-19 21:30:53

1

由於您使用jQuery,使用parent()方法,用這種。

function validate(id, error) { 
    var obj = $('#' + id); 
    if(obj.val() == '0' || obj.val() == ''){ 
     $('.form-error',obj.parent('#one_field_box')).html(error); 
     return true; 
    } 
return false; 
} 
+0

如果我需要瀏覽不同的'#one_field_box'我需要通過這些id作爲參數? – cMinor 2013-03-19 21:30:37

+0

@cMinor首先,我建議不要使用具有相同ID的多個元素。而是爲它們提供所有相同的類名和一個數據屬性來指定錯誤消息ex: - data-error =「Name不能爲空」然後使用$('。classname')。each(call在這裏用$(this ))刪除代碼var obj = $('#'+ id);從你的validate函數直接處理對象,並從錯誤消息中獲取$(obj).data('error')的消息。 – PSL 2013-03-19 22:28:02