使用 jQuery 对充当 Radio 的按钮进行 Bootstrap3 表单验证
Posted
技术标签:
【中文标题】使用 jQuery 对充当 Radio 的按钮进行 Bootstrap3 表单验证【英文标题】:Bootstrap3 Form Validation for Button acting as Radio using jQuery 【发布时间】:2014-07-24 11:10:41 【问题描述】:背景
我有一个表单,用户在添加其他用户时必须单击单选按钮来选择安全级别。做一些研究,很明显 jQuery Validation 与充当单选按钮的按钮不兼容。因此,我查看了其他人的解决方案,它在“单击”按钮时将隐藏值设置为按钮的值,并且该隐藏值是验证用户输入的值。不幸的是,它不起作用。
有人可以帮我调整一下代码,让这个隐藏的输入按钮假设所点击按钮的值。请记住,我在 html 中省略了一些常规输入字段,例如名字和姓氏。
更新:
这个表单恰好位于模态窗口内。我相信 Bootstrap 的 modal-open 处理程序正在干扰.on
的实际 jquery。任何人都可以提供“新曝光”信息的解决方案吗?
表单中的按钮
<div class="btn-group" data-toggle="buttons" id="addSecLvlButtons" >
<label id="addSecLvl1Label" class="btn btn-default btn-gradient btn-sm">
<input class="radioinput" type="radio" name="addSecLvlOptions" id="addSecLvloption1" value="1">Security Lvl 1</label>
<label id="addSecLvl2Label" class="btn btn-default btn-gradient btn-sm">
<input class="radioinput" type="radio" name="addSecLvlOptions" id="addSecLvloption2" value="2">Level 2</label>
<label id="addSecLvl3Label" class="btn btn-default btn-gradient btn-sm">
<input class="radioinput" type="radio" name="addSecLvlOptions" id="addSecLvloption3" value="3">Level 3</label>
<label id="addSecLvl4Label" class="btn btn-default btn-gradient btn-sm">
<input class="radioinput" type="radio" name="addSecLvlOptions" id="addSecLvloption4" value="4">Level 4</label>
<label id="addSecLvl5Label" class="btn btn-default btn-gradient btn-sm">
<input class="radioinput" type="radio" name="addSecLvlOptions" id="addSecLvloption5" value="5">Level 5</label>
</div>
<input required type="hidden" name="addSecLvl" id="addSecLvl">
jQuery
//Validating Add Radio Buttons
$('#addSecLvlButtons').on('click', '.radioinput', function()
$('#addSecLvl').val($(this).val());
);
//Validate the form and show hidden fields
$('#addUser').validate(
debug: false,
ignore: [],
rules:
addFirstName: "required",
addLastName: "required"
,
messages:
addFirstName: "Please enter the new user's first name",
addLastName: "Please enter the new user's last name"
);
可能的解决方案建议
我有这段代码,它似乎在模式窗口内与引导程序一起工作正常。也许对.on
也可以稍加调整?只是想“跳出框框思考”
$("#addUserName").focus(function()
var firstname = $("#addFirstName").val();
var lastname = $("#addLastName").val();
if(firstname && lastname && !this.value)
this.value = firstname + "." + lastname;
);
【问题讨论】:
【参考方案1】:好消息,你已经很接近了。您将标签对象传递给您的点击处理程序,而不是输入对象(请注意,您传递的对象是类.btn
,即标签)。
试试这样的:
HTML
<input class="radioinput" type="radio" name="addSecLvlOptions" id="addSecLvloption1" value="1">`
JavaScript
//Validating Add Radio Buttons
$('#addSecLvlButtons').on('click', '.radioinput', function()
$('#addSecLvl').val($(this).val());
);`
Here 是一个演示代码的 JSFiddle。祝你好运!
【讨论】:
对不起,伙计,似乎不起作用。我已经在服务器上修改了它,但仍然不行:( 奇怪,它非常适合我。你用正确的类名更新了你所有的 标签?您应该通过输入调试消息console.log("Got here");
或 alert("Got here");
来仔细检查您的点击处理程序是否已到达
hmmmm 还是什么都没有。我不认为这应该在document.ready()
函数中起作用。它不应该需要:\
正确,没必要。如果您在该单击处理程序中放置了一个调试警报,并且当您单击绑定它的任何内容时它没有被调用,那么您在某处有语法错误。在您使用的任何浏览器上查看 javascript 控制台,您应该会看到它弹出。确保您更新了点击处理程序,如图所示,而不仅仅是 <input>
标签。
我用一个 JSFiddle 更新了答案,展示了它应该如何工作。希望你能弄清楚!以上是关于使用 jQuery 对充当 Radio 的按钮进行 Bootstrap3 表单验证的主要内容,如果未能解决你的问题,请参考以下文章