如何:动态jQuery,选择至少一个,使用掩码进行验证
我有一个动态的文本框列表来捕获一个或多个货币金额。 我希望至少有一个文本框具有有效的货币金额 我不能让它完全发挥作用。如果您有任何想法或建议,我将不胜感激 这是我到目前为止所拥有的如何:动态jQuery,选择至少一个,使用掩码进行验证,jquery,jquery-selectors,validation,jquery-validate,Jquery,Jquery Selectors,Validation,Jquery Validate,我有一个动态的文本框列表来捕获一个或多个货币金额。 我希望至少有一个文本框具有有效的货币金额 我不能让它完全发挥作用。如果您有任何想法或建议,我将不胜感激 这是我到目前为止所拥有的 <html> <head> <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.js"></script> <link href="http://ajax.go
<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>
试验
输入金额,然后单击“发送”
数量
数量
数量
$(文档).ready(函数(){
$('input[name^=“Amount_quo;]).mask($999”);
$.validator.addMethod(“PickAtlestone”,函数(值、元素、参数){
返回$('input[name^=“Amount”]')。val()==“$”;
});
$('#myform').validate();
$('input[name^=“Amount_”]')。每个(函数(){
$(此).rules(“添加”{
皮克特拉斯通:是的,
信息:{
pickAtLeastOne:“请至少输入一个金额”
}
});
});
});
您应该检查正在测试的当前元素,而不是整个组选择器,因此请尝试替换以下代码:
return $('input[name^="Amount_"]').val() == "$";
对于这一个:
return value == "$";
因为在中,我是如何让它工作的。除了我的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;
});
只要试试这个,我就在txtBox上使用了类数量,您可以根据需要修改它和工作代码
嗨,尼尔森,谢谢你的编辑。当我尝试这样做时,javascript可以工作,但是没有条目、一个条目、两个条目或所有条目都会出现错误。我希望它只在没有条目时显示错误。我现在看到有两个问题。1表示最初,文本框为空。仅当单击文本框时,遮罩才会出现。只有这样,$才会出现在文本框中。第二个问题是,如果用户单击文本框然后离开该字段,则其他文本框中可能有美元符号。在这种情况下,您的解决方案不起作用,因为有多个字段包含$符号。感谢您的帮助!这没有考虑到掩码函数可能会将“$”添加到任何文本框中。然而,我看到您只是提供了另一种方法,通过使用类来标识元素,从而满足了我的要求。非常强大。谢谢
$.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;
});