如何使此javascript表单生效?
用户必须从三个输入“类别”中各选择一个收音机。如果他没有这样做就“提交”,他会得到警告: 这样的标记:如何使此javascript表单生效?,javascript,jquery,forms,radio-button,Javascript,Jquery,Forms,Radio Button,用户必须从三个输入“类别”中各选择一个收音机。如果他没有这样做就“提交”,他会得到警告: 这样的标记: <form> <div id="color"> <input type="radio" name="color" id="blue"> <label for="blue">Blue</label> <input type="radio" name="color" id="
<form>
<div id="color">
<input type="radio" name="color" id="blue">
<label for="blue">Blue</label>
<input type="radio" name="color" id="red">
<label for="red">Red</label>
<input type="radio" name="color" id="green">
<label for="green">Green</label>
</div>
<div id="shape">
<input type="radio" name="shape" id="square">
<label for="square">Square</label>
<input type="radio" name="shape" id="circle">
<label for="circle">Circle</label>
<input type="radio" name="shape" id="triangle">
<label for="triangle">Triangle</label>
</div>
<div id="size">
<input type="radio" name="size" id="small">
<label for="small">Small</label>
<input type="radio" name="size" id="medium">
<label for="mediume">Medium</label>
<input type="radio" name="size" id="large">
<label for="large">Large</label>
</div>
</form>
<a id="link" href="#">click me to "submit"</a>
<p id="warning"></p>
这是一段较大代码的简化版本。如何更有效地重写条件,使我不必详细检查每个输入名称?(每个“提交”应该只显示一个“警告”,即使没有选中多个输入名称类别。)编辑标记也可以
谢谢
function validationCheck() {
var isValid = true,
errorText = "";
$("form div").each( //get the divs that hold the radios and loop
//$("#color, #shape, #size").each( //could do it by ids of the divs also
function(){
var div = jQuery(this), //div reference
isChecked = div.find('input[type="radio"]:checked').length>0; //see if we have anything selected
if (!isChecked) { //if no selections, show error message
isValid = false; //set validation to false
errorText = "Oops! Please choose a " + div.prop("id") + "!"; //build error message
return false; //exit each loop
}
}
);
$('#warning').text(errorText); //set error message
return isValid;
}
您可能想考虑在用户不选择任何输入或只有1个输入的情况下生成警告消息。 在本例中,用户将收到类似于
Oops!请选择颜色和形状代码>
$('#link').on('click', function(){
var msgs = [];
$('#color, #shape, #size').each(function(i, ele){
if($(this).find('input:checked').length == 0)
msgs.push(this.id);
});
if(msgs.length > 0)
$('#warning').text("Oops! Please choose a " + msgs.join(", and "));
});
当将行为应用于类似的组时,您应该开始考虑类而不是id,在这个解决方案中,您不需要单独的数据名,但我认为最好将数据与html id分开,但如果您愿意,可以使用这个.id
<form>
<div id="color" class="selection-group" data-name="color">
<input type="radio" name="color" id="blue">
<label for="blue">Blue</label>
<input type="radio" name="color" id="red">
<label for="red">Red</label>
<input type="radio" name="color" id="green">
<label for="green">Green</label>
</div>
<div id="shape" class="selection-group" data-name="square">
<input type="radio" name="shape" id="square">
<label for="square">Square</label>
<input type="radio" name="shape" id="circle">
<label for="circle">Circle</label>
<input type="radio" name="shape" id="triangle">
<label for="triangle">Triangle</label>
</div>
<div id="size" class="selection-group" data-name="size">
<input type="radio" name="size" id="small">
<label for="small">Small</label>
<input type="radio" name="size" id="medium">
<label for="mediume">Medium</label>
<input type="radio" name="size" id="large">
<label for="large">Large</label>
</div>
</form>
<a id="link" href="#">click me to "submit"</a>
<p id="warning"></p>
我建议使用实际的HTML表单元素,如或,然后您可以确保表单中的任何元素(向下一级)在每个元素中都有一个selected=“selected”属性。谢谢,但我能找到的关于元素的唯一文档是XUL上的MDN页面。我对XUL一无所知。为什么不直接输入[type=radio]?确保在检查开始时清除错误消息,这样不会给用户“假阳性”。@Scorpion Prince看起来不错!!只是不确定我们是否需要重复数据消息中的消息,如果结果证明我们需要不同的消息,我可能最终会使用它,这在现实世界中可能会是一个非常简单的例子。非常感谢。只有一个问题:当我点击“提交”而没有检查收音机时,我首先得到“大小”警告。对于可用性,我希望警告按照标记的顺序出现。换句话说,“颜色”应该是第一位的。我如何引导each()函数的“序列”?@Ben我在each中添加了一个返回false,当它发现一个缺少选择的组时,它就会从循环中中断,这应该可以做到!谢谢,但那实际上不起作用。尝试单击“提交锚定”,然后选择颜色,然后再次单击“提交锚定”。“颜色”消息没有改变。@Ben您只是忘记了if块周围的卷曲括号,因此无论是否发现错误,都会执行返回false!
$('#link').on('click', function(){
var msgs = [];
$('#color, #shape, #size').each(function(i, ele){
if($(this).find('input:checked').length == 0)
msgs.push(this.id);
});
if(msgs.length > 0)
$('#warning').text("Oops! Please choose a " + msgs.join(", and "));
});
<form>
<div id="color" class="selection-group" data-name="color">
<input type="radio" name="color" id="blue">
<label for="blue">Blue</label>
<input type="radio" name="color" id="red">
<label for="red">Red</label>
<input type="radio" name="color" id="green">
<label for="green">Green</label>
</div>
<div id="shape" class="selection-group" data-name="square">
<input type="radio" name="shape" id="square">
<label for="square">Square</label>
<input type="radio" name="shape" id="circle">
<label for="circle">Circle</label>
<input type="radio" name="shape" id="triangle">
<label for="triangle">Triangle</label>
</div>
<div id="size" class="selection-group" data-name="size">
<input type="radio" name="size" id="small">
<label for="small">Small</label>
<input type="radio" name="size" id="medium">
<label for="mediume">Medium</label>
<input type="radio" name="size" id="large">
<label for="large">Large</label>
</div>
</form>
<a id="link" href="#">click me to "submit"</a>
<p id="warning"></p>
$('#link').on('click', function() {
$('.selection-group').each(function() {
if(!$(this).find('input[type=radio]:checked').length) {
$('#warning').html("Oops! Please choose a "+ $(this).data('name') +"!");
return false;
}
});
});