如何：動態jQuery，挑選至少一個，驗證與面具

我有一個動態列表的文本框來捕獲一個或多個貨幣金額。我希望至少有一個文本框具有有效的貨幣金額。如何：動態jQuery，挑選至少一個，驗證與面具

我不能很好地工作。我真的很感激任何想法或建議。

這裏是我迄今爲止...

<html> 
    <head> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.js"></script> 
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/themes/cupertino/jquery-ui.css" rel="stylesheet" type="text/css" /> 
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script> 
    <script type="text/ecmascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.10.0/jquery.validate.min.js"></script> 
    <script type="text/ecmascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.10.0/additional-methods.min.js"></script> 
    <script type="text/javascript" src="js/jquery.maskedinput-1.3.min.js"></script> 

    <div id="page_wrap"><form action="http://local.host.com/myform/net/send" method="post" accept-charset="utf-8" id="myform"> 
    <h2>Test</h2> 
    <h3>Enter an amount and click send</h3> 
    <?php //foreach ($recs as $rec): ?> 
    <Fieldset> 
    <label for="Amount_1">Amount</label> 
    <input name="Amount_1" type="text" id="Amount_1" /> 
    </Fieldset> 
    <Fieldset> 
    <label for="Amount_2">Amount</label> 
    <input name="Amount_2" type="text" id="Amount_2" /> 
    </Fieldset> 
    <Fieldset> 
    <label for="Amount_3">Amount</label> 
    <input name="Amount_3" type="text" id="Amount_3" /> 
    </Fieldset> 
    <?php // endforeach; ?> 

    <span class="button right"><input type="submit" value="Send" /></span> 
    <br class="flt_clear" /> 
    </form> 
    <script> 
    $(document).ready(function() { 
     $('input[name^="Amount_"]').mask("$?999");  
     $.validator.addMethod("pickAtLeastOne", function(value, element, param) { 
     return $('input[name^="Amount_"]').val() == "$"; 
     }); 
     $('#myform').validate(); 
     $('input[name^="Amount_"]').each(function() { 
     $(this).rules("add", { 
     pickAtLeastOne: true, 
     messages: { 
      pickAtLeastOne: "Please enter at least one amount" 
     } 
     }); 
    }); 
    }); 
    </script> 
    </body> 
</html>

來源

2012-10-09 wclark

這是我如何運作的。除了我的pickAtLeastOne方法外，一切都是正確的。這裏是工作的一個：

$.validator.addMethod("pickAtLeastOne", function(value, element, param) { 
    var retCode = false; 
    $('input[name^="Amount_"]').each(function(value, element) { 
    if ($(this).val() != '$' && $(this).val() != '') { 
     retCode = true; 
     return; 
    } 
    }); 
    return retCode; 
});

來源

2012-10-12 04:28:35 wclark

您應該檢查對當前元素被測試，而不是整個組選擇，那麼請嘗試更換你的下面的代碼：

return $('input[name^="Amount_"]').val() == "$";

這一個：

return value == "$";

因爲

來源

2012-10-09 16:26:18 Nelson

當我做出這個改變，我的javascript由於某種原因變得無效... – wclark

嗨尼爾森，感謝您的編輯。當我嘗試的時候，javascript工作，但沒有條目，一個條目，2個條目或所有條目都會給出錯誤。我希望它只在沒有條目時才顯示錯誤。 – wclark

我現在看到有2個問題。 1是最初，文本框是空的。只有當文本框被點擊時纔會出現遮罩。只有這樣$纔會出現在文本框中。第二個問題是，如果用戶點擊文本框然後離開了該字段，其他文本框可能會有美元符號。在這種情況下，您的解決方案不起作用，因爲有多個包含$符號的字段。 – wclark

只是試試這個，而是我對txtBox使用類量，你可以修改你想要它和工作代碼FIDDLE

$.validator.addMethod("pickAtLeastOne", function(value, element, param) { 
    var retCode = false; 
    var txtBoxLength = $('.amount').length; 
    var ctr = 0; 
    $('.amount').each(function(value, element) { 
    if ($(this).val() == ''){ 
     ctr++; 
    } 
    }); 
return ctr == txtBoxLength; 
});

來源

2012-10-12 04:44:07

感謝這個Rajesh！這沒有考慮到掩碼函數可能會在任何文本框中添加'$'。不過，我發現你只是提供另一種方法來使用類來識別元素，從而淡化我所要求的內容。很強大。謝謝！ – wclark

如何：動態jQuery，挑選至少一個，驗證與面具

回答

相關問題