天道酬勤,学无止境

无线电输入的验证返回错误[关闭](Validation of radio inputs returns a error [closed])

问题

我已经坚持了一段时间,无法弄清楚为什么无线电验证在我当前的项目中不起作用,但是如果表单除了单选按钮本身之外没有其他功能,那么它会起作用。 我知道它与 Error.txt 有关

欢迎任何想法:)

回答1

这个问题是您的validateForm(form)函数期望表单作为参数,但在您的onsubmit处理程序中,您没有传递表单。

更改的onsubmit让你通过this给函数:

<form name="contactform" action="#" onsubmit="return validateForm(this);" method="post" enctype="multipart/form-data">

此外,从提交按钮中删除onclick ,否则验证将触发两次。

最后,不是您的主要问题,而是您指的是未声明的x.length


旁注:您不需要函数末尾的form.submit()因为如果发生任何验证错误,您将返回false ,因此如果所有验证都正常,表单将继续提交。

受限制的 HTML

  • 允许的HTML标签:<a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • 自动断行和分段。
  • 网页和电子邮件地址自动转换为链接。

相关推荐
  • 使用jQuery验证插件验证单选按钮组(Validation of radio button group using jQuery validation plugin)
    问题 如何使用jQuery验证插件对单选按钮组(应选择一个单选按钮)执行验证? 回答1 使用较新版本的jquery(我认为是1.3+),您所要做的就是将无线电集的成员之一设置为必需,而jquery将负责其余的工作: <input type="radio" name="myoptions" value="blue" class="required"> Blue<br /> <input type="radio" name="myoptions" value="red"> Red<br /> <input type="radio" name="myoptions" value="green"> Green 上面将要求在继续之前,选择3个带有“我的选项”名称的单选选项中的至少一个。 顺便说一句,马埃斯(Mahes)提出的标签建议效果很好! 回答2 使用以下规则来验证单选按钮组的选择 myRadioGroupName : {required :true} myRadioGroupName是您为name属性赋予的值 回答3 您还可以使用以下命令: <fieldset> <input type="radio" name="myoptions[]" value="blue"> Blue<br /> <input type="radio" name="myoptions[]" value="red
  • JavaScript中的单选按钮验证(Radio button validation in javascript)
    问题 需要验证单选按钮的输入,即当按下提交按钮并且没有选择任何单选按钮时,它会警告用户说“请选择一个复选框”,如果选择了单选按钮,则只需提交表单,没有警报。 只能为此使用HTML CSS和JavaScript,我知道它在jquery中要容易1000倍,但可惜我不能使用它。 而且我知道我的HTML是无效的,但是除非它直接影响我当前的问题,否则我会在以后处理。 <form name="form1" action="#" onsubmit="return validateForm()" method="post"> First time visitor?:<br/> <label for="s1">Yes</label> <input type="radio" id="1" name="yesno" value="1"/> <br/> <label for="s2">No</label> <input type="radio" id="1" name="yesno" value="2"/> <br/> <input type="submit" value="Submit"><br/> </form> 任何指针,不胜感激,谢谢。 回答1 第一:如果您知道自己的代码不正确,则应在执行任何操作之前先对其进行修复! 您可以执行以下操作: function validateForm() { var
  • 名称=''的无效表单控件不可聚焦(An invalid form control with name='' is not focusable)
    问题 在Google Chrome浏览器中,某些客户无法进入我的付款页面。 尝试提交表单时出现此错误: 名称=''的无效表单控件不可聚焦。 这来自JavaScript控制台。 我读到问题可能是由于隐藏字段具有必填属性。 现在的问题是,我们使用的是.net Webforms必需的字段验证器,而不是html5必需的属性。 似乎谁得到此错误是随机的。 有谁知道解决方案吗? 回答1 如果表单字段验证失败,则在Chrome上会发生此问题,但是由于相应的无效控件无法聚焦,浏览器尝试在其旁边显示消息“请填写此字段”的尝试也失败了。 由于多种原因,在触发验证时,表单控件可能无法聚焦。 下列两种情况是最主要的原因: 根据业务逻辑的当前上下文,该字段无关紧要。 在这种情况下,应禁用相应控件或将其从DOM中删除,或者此时不要将其标记为required属性。 由于用户按输入上的ENTER键,可能会发生过早验证。 或者用户单击按钮/输入控件的形式尚未正确定义控件的type属性。 如果按钮的type属性未设置为button ,则每次单击button ,Chrome(或其他任何浏览器)都会执行一次验证,因为submit是按钮的type属性的默认值。 要解决该问题,如果页面上有一个按钮除了执行提交或重置操作外还执行其他操作,请始终记住执行以下操作: <button type="button"> 。
  • 对一组复选框使用HTML5“必需”属性吗?(Using the HTML5 “required” attribute for a group of checkboxes?)
    问题 使用支持HTML5的较新浏览器时(例如FireFox 4); 并且表单字段具有属性required='required' ; 表单字段为空/空白; 然后单击提交按钮; 浏览器检测到“必填”字段为空,不提交表单; 而是浏览器显示提示,要求用户在该字段中键入文本。 现在,我没有一组文本框,而是一组复选框,其中至少有一个应由用户选中/选择。 如何在这组复选框上使用HTML5 required属性? (由于仅需要选中一个复选框,因此我无法在每个复选框上都放置required属性) ps。 我正在使用simple_form,如果那很重要的话。 更新 HTML 5多重属性可以在这里有所帮助吗? 之前有人使用它来做与我的问题类似的事情吗? 更新 看来HTML5规范不支持此功能: ISSUE-111:input。@ required @type = checkbox是什么意思? (问题状态:问题已标记为已关闭而没有任何偏见。 )这是解释。 更新2 这是一个古老的问题,但想澄清一下,该问题的初衷是能够在不使用Javascript的情况下完成上述操作,即使用HTML5做到这一点。 回想起来,我应该使“无Javascript”更加明显。 回答1 不幸的是,HTML5并没有提供开箱即用的方式来做到这一点。 但是,使用jQuery,您可以轻松控制复选框组是否至少具有一个选中的元素。
  • 如何在“无线电”输入字段中使用“必需”属性(How to use the “required” attribute with a “radio” input field)
    问题 我只是想知道如何以正确的方式在单选按钮上使用新的HTML5输入属性“ required”。 是否每个单选按钮字段都需要下面的属性,或者仅一个字段就足够了吗? <input type="radio" name="color" value="black" required="required" /> <input type="radio" name="color" value="white" required="required" /> 回答1 TL; DR:为无线电组的至少一个输入设置required属性。 所有输入required的设置更加清晰,但不是必需的(除非动态生成单选按钮)。 要对单选按钮进行分组,它们必须全部具有相同的name值。 这允许只有一个在同一时刻被选择并应用required对整个组。 <form> Select Gender:<br> <label> <input type="radio" name="gender" value="male" required> Male </label><br> <label> <input type="radio" name="gender" value="female"> Female </label><br> <label> <input type="radio" name="gender" value=
  • 如何检查JavaScript是否选择了单选按钮?(How can I check whether a radio button is selected with JavaScript?)
    问题 我在HTML表单中有两个单选按钮。 字段之一为空时,将出现一个对话框。 如何检查是否选择了单选按钮? 回答1 假设您有这样的HTML <input type="radio" name="gender" id="gender_Male" value="Male" /> <input type="radio" name="gender" id="gender_Female" value="Female" /> 对于客户端验证,以下是一些Java脚本,用于检查选择了哪一个: if(document.getElementById('gender_Male').checked) { //Male radio button is checked }else if(document.getElementById('gender_Female').checked) { //Female radio button is checked } 根据标记的确切性质,可以使上述操作更为有效,但这足以使您入门。 如果您只是想查看页面上的任何位置是否选择了任何单选按钮,则PrototypeJS使其非常容易。 如果在页面的某处选择了至少一个单选按钮,则此函数将返回true。 同样,这可能需要根据您的特定HTML进行调整。 function atLeastOneRadio() { return ($(
  • 使用javascript验证html中的输入文本字段(validation of input text field in html using javascript)
    问题 <script type='text/javascript'> function required() { var empt = document.forms["form1"]["Name"].value; if (empt == "") { alert("Please input a Value"); return false; } } </script> <form name="form1" method="" action=""> <input type="text" name="name" value="Name"/><br /> <input type="text" name="address line1" value="Address Line 1"/><br /> 我有多个输入文本字段,每个字段都有自己的默认值。 在提交表单之前,我必须验证是否已填写所有字段。 到目前为止,由于不同的文本框具有不同的默认值,我让 javascript 来检查 null。 如何编写 javascript 来验证用户是否已输入数据? 我的意思是,脚本必须标识输入数据不是默认值和空值。 回答1 如果您不使用 jQuery,那么我将简单地编写一个验证方法,您可以在提交表单时触发该方法。 该方法可以验证文本字段以确保它们不是空的或默认值。 该方法将返回一个 bool 值,如果它为
  • 禁用表单验证(Disabling form validation)
    问题 Angularjs正在通过FormController运行我的表单(例如跟踪原始、脏等)。 我不需要这个功能; 我确定它会增加我的$digests开销。 我怎样才能关闭它? 回答1 AFAIK 没有简单的开关来关闭 AngularJS 验证。 实际上大部分验证发生在NgModelController和 input 指令中——基本上是 input.js 文件中的代码。 因此,要摆脱内置验证,您必须从此文件(以及其他一些文件,例如 select)重新开发代码。 您是否将验证代码确定为应用程序中的性能瓶颈? 回答2 更新:这不起作用......至少不是你想要的方式。 将 ng-non-bindable 添加到表单或任何输入都会破坏所有绑定。 因此,输入中的 ng-model 将不再起作用。 对不起 .... ng-non-bindable 是解决这个问题的方法。 它会阻止 AngularJS 将表单视为指令。 这将使 AngularJS 忽略整个表单: <form name="inviteContactForm" ng-non-bindable> 这将使 AngularJS 忽略表单的一部分: <input type="email" name="email" ng-non-bindable> 你可以在这里阅读一些关于我对这个问题的抱怨。 http://calendee.com
  • 如何使用jQuery获取输入类型?(How to get input type using jquery?)
    问题 我有一个页面,其中输入类型总是变化的,我需要获取取决于输入类型的值。 因此,如果类型是单选,我需要获取选中的内容,如果是复选框,则现在需要选中的内容,如果是下拉列表,则需要知道选择了哪个,是否需要一个文本/文本区域,我需要知道值。 关于如何做到这一点的任何想法? 回答1 EDIT,2013年2月1日。由于此答案的普及以及1.9(和2.0)版中有关属性和属性的jQuery更改,我添加了一些注释和小提琴,以查看访问输入的属性/属性时它如何工作,按钮和一些选择。 这里的小提琴:http://jsfiddle.net/pVBU8/1/ 获取所有输入: var allInputs = $(":input"); 获取所有输入类型: allInputs.attr('type'); 得到值: allInputs.val(); 注意:.val()与:check不同,它们是相关的。 用: .attr("checked"); 编辑2013年2月1日-重新:jQuery 1.9使用prop()而不是attr(),因为attr不会为已更改的属性返回正确的值。 .prop('checked'); 或简单地 $(this).checked; 获取支票的价值-无论当前是什么。 或者,如果只希望那些已被检查的代码,则只需使用':checked'。 编辑:这是获取类型的另一种方法: var
  • 如何绑定到angular2 beta 6中的单选按钮(How to bind to radio buttons in angular2 beta 6)
    问题 如何在Beta 6中实现单选按钮绑定? 我找到了一个适用于Beta 0的出色plnkr(请参阅http://plnkr.co/edit/aggee6An1iHfwsqGoE3q?p=preview),但是当我尝试将其更新为Beta 6时,它会严重损坏(请参阅http://plnkr.co/编辑/ voU933?p =预览)。 我看了一下添加了对单选选项的内置支持的提交(请参阅https://github.com/angular/angular/commit/e725542),该示例给出了此示例。 @Component({ template: ` <input type="radio" name="food" [(ngModel)]="foodChicken"> <input type="radio" name="food" [(ngModel)]="foodFish"> ` }) class FoodCmp { foodChicken = new RadioButtonState(true, "chicken"); foodFish = new RadioButtonState(false, "fish"); } 但是到目前为止,我进行这项工作的尝试就像失败的plnkr一样结束了。 回答1 更新 Radio在RC.4和新表格模块中运行良好。 请参阅https:/
  • 验证单选按钮AngularJS(Validate Radio Button AngularJS)
    问题 这似乎应该很容易,但是我没有找到答案。 我有一个表格,需要在此表格中确认是否从广播组中进行了选择。 我尝试在单选按钮上使用'required'属性,但是在验证表单后,除非所有单选按钮都被选中(设计上是不可能的),否则它将抱怨。 在AngularJS中验证无线电组选择的正确方法是什么? <form name="myForm" ng-submit="submitForm()" ng-controller="ExampleController"> <input type="radio" ng-model="color" value="red" required> Red <br/> <input type="radio" ng-model="color" value="green" required> Green <br/> <input type="radio" ng-model="color" value="blue" required> Blue <br/> <tt>color = {{color | json}}</tt><br/> <button type="submit">Submit</button> </form> 单击Plnkr中的“提交”按钮将显示该行为。 http://plnkr.co/edit/3qcIbMvJk19OvokcHe2N?p=预览 回答1
  • 在同一页面上显示PHP表单验证结果(Display PHP Form Validation Results on Same Page)
    问题 我敢肯定,最初的反应将是:“这个人没有Google吗?” 是的,我承认这确实是一个非常基本的概念,并且我尝试并尝试将其包裹住,查找有关该主题的各种帖子和文章,等等,但无济于事。 也许您可以指出正确的方向? 我有一个基本的联系表单(contact.html),该表单与外部PHP脚本(contact.php)一起运行。 这是HTML表单代码: <form id="form1" action="contact.php" method="post"> <div class="form1"> <label>Your Name:</label> <span><input type="text" name="name" /></span> </div> <div class="form1"> <label>Your School:</label> <span><input type="text" name="school" /></span> </div> <div class="form1"> <label>Phone Number:</label> <span><input type="text" name="phone" /></span> </div> <div class="form1"> <label>E-Mail Address:</label> <span><input
  • AngularJS设置全局ngModelOptions(AngularJS set global ngModelOptions)
    问题 更新ngModel(以及随后的验证)的默认行为是更改; 我想将其更改为模糊。 该文档仅通过以下方式逐个说明了如何执行此操作: <ANY ng-model-options="{ updateOn: 'blur' }"></ANY> 。 我曾经浏览过源代码,但是无论如何都找不到ngModelOptions和ng-model-options (尽管两者都发生在文档中,但都从源代码中删除了)。 回答1 虽然Jon / John编写的ngModel装饰器提供了一个很好的后台解决方案,但还必须意识到,声明性地, ngModelOptions不必在各个输入字段级别进行声明,而可以在模块级别进行声明。 <body ng-app = "myApp" ng-model-options="{ updateOn: 'blur' }"> 进行上述操作将使myApp模块中的所有输入字段都继承ng-model-options。 然后,可以根据需要在特定的输入字段中覆盖这些字段(例如搜索过滤器)。 该监听器演示:http://plnkr.co/edit/2L1arGgHJwK82xVucJ4p?p=preview 回答2 正如@Angad提到的那样,您可以在任何元素上设置ng-model-options,它将应用于其所有后代。 但是,这样做的问题是,如果您这样设置,则收音机和复选框会按预期停止工作:
  • jQuery验证:向父div添加错误或验证类(jQuery Validate: add error or validate class to parent div)
    问题 我正在使用Twitter的Bootstrap作为我正在从事的项目的框架。 我正在尝试使用jQuery Validate插件来验证简单的联系表单,但这会引起一些麻烦。 我想将Error或Valid类添加到每个表单输入的父div中。 这是我的表单代码: <form id="msg-form" class=""> <fieldset> <div class="input-prepend control-group pull-left"> <span class="add-on">@</span> <input class="span3 required email" id="inputEmail" name="msg-email" type="text" placeholder="example@example.com"> </div> <div class="input-prepend control-group pull-left"> <span class="add-on"><i class="icon-user"></i></span> <input class="span3 required" id="inputName" name="msg-name" type="text" placeholder="Joe Bloggs"> </div> <div class=
  • 使用$ http的AngularJS自定义表单验证(AngularJS custom form validation using $http)
    问题 我有一个看起来像这样的表格: <form name="myForm" ng-submit="saveDeployment()"> <input type="hidden" value="{{item.CloneUrl}}" name="cloneurl" /> <input type="hidden" value="{{Username}}" name="username" /> <input type="radio" name="deploymenttype" ng-model="item.deploymentType" value="azure" checked="checked">Azure <br /> <input type="radio" name="deploymenttype" ng-model="item.deploymentType" value="ftp">FTP <div id="azure" ng-show="item.deploymentType=='azure'"> <label for="azurerepo">Azure Git Repo</label> <input type="text" name="azurerepo" ng-model="item.azurerepo" ng-class="{error: myForm.azurerepo
  • jQuery验证插件:“验证”复选框(jQuery Validation plugin: validate check box)
    问题 我正在使用jQuery Validation插件来验证复选框,因为它没有默认选项,应该选中一个,最多可以选中两个复选框,这就是标准。 我没有收到任何错误,也没有验证。 我将其扩展如下 <input type="checkbox" name="test[]" />x <input type="checkbox" name="test[]" />y <input type="checkbox" name="test[]" />z $("#formid").validate({ rules: { test[]: { required: function(elem) { return $("input.select:checked").length > 0; } }, messages: { test[]: "You must check at least 1 box" } }); 回答1 您的代码有几个问题。 1)在rules范围内缺少右括号} 。 2)在这种情况下,没有required为required规则使用函数。 默认情况下,该插件可以很好地处理checkbox和radio输入,因此使用true就足够了。 但是,这将简单地执行与原始功能相同的逻辑,并验证是否选中了至少一个。 3)如果您还只希望最多检查两个,则需要应用maxlength规则。 4)
  • Twitter Bootstrap和jQuery验证插件-使用class =“ control-group error”(Twitter Bootstrap and jQuery Validation Plugin - use class=“control-group error”)
    问题 我已经使用Twitter Bootstrap框架创建了一个表单,并集成了jQuery Validation插件。 我有一个带有一系列单选按钮的是/否问题的表格,我通过验证这些单选按钮可以确保每个问题都不为空-效果很好。 我想利用Bootstrap class =“ control-group error”来使错误文本显示为红色,以便对用户显示出来-当前“此字段是必需的”文本为黑色,很难定位。 有一个示例,我希望错误文本出现在这里: http://twitter.github.io/bootstrap/base-css.html#forms 在本节末尾的“验证状态”下。 这是一个特定的示例,在输入字段后显示一条红色消息(我只希望在他们单击“提交”按钮后出现错误): <div class="control-group error"> <label class="control-label" for="inputError">Input with error</label> <div class="controls"> <input type="text" id="inputError"> <span class="help-inline">Please correct the error</span> </div> </div> 这是我的表格,显示一个问题: <form
  • 如何使select2与jquery.validation插件一起使用?(How to make select2 work with jquery.validation plugin?)
    问题 我正在尝试使用jquey.validation插件验证select2字段,但没有任何反应。 我要选择必填字段。 我正在使用此自定义验证功能: $.validator.addMethod("requiredcountry", function(value, element, arg){ return arg != value; }, "Value must not equal arg."); 这是规则: rules: { country: { required: true, requiredcountry: "" } } 我应该使用哪个select2字段来匹配规则? 我感谢任何想法如何使select2与jquery.validation一起使用 10倍 回答1 只需在您的表单验证功能中添加ignore: [], 。 它将启用隐藏字段验证。因此您将获得Select 2的验证。 $("#ContactForm").validate({ ignore: [], rules: { //Rules }, messages: { //messages } }); 回答2 我已经在博客文章中对此进行了详细介绍:http://chadkuehn.com/jquery-validate-select2/ 将Select2放在SELECT标记上时,它会隐藏原始元素。 因此,在验证插件中
  • jquery.validate验证text,checkbox,radio,selected
    jquery.validate是jquery的一个插件,用来辅助开发者在客户端方便快捷的实现表单验证,最终达到提高用户体验的目的。官网:http://plugins.jquery.com/validate/示例代码index.cshtml<form id="formLogin" method="post"> <div> <label for="username">Username:</label> <input type="text" id="username" name="username" /> </div> <div> <label for="password">password:</label> <input type="text" id="password" name="password" /> </div> <div> <label for="password1">password1:</label> <input type="text" id="password1" name="password1" /> </div> <div> <label for="sex">sex:</label> <select id="sex" name="sex"> <option id="sexopt" value="" selected="selected">请选择</option>
  • 禁用HTML5表单元素的验证(Disable validation of HTML5 form elements)
    问题 在我的表单中,我想使用新的HTML5表单类型,例如<input type="url" /> (有关此处类型的更多信息)。 问题在于Chrome希望对我有帮助,并为我验证这些元素,除了它会吸引人。 如果未通过内置验证,则该元素不会成为焦点,否则不会显示任何消息或指示。 我用"http://"预填充URL元素,因此我自己的自定义验证只是将这些值视为空字符串,但是Chrome拒绝了。 如果我可以更改其验证规则,那也可以。 我知道我可以恢复使用type="text"但我希望使用这些新的类型提供的增强功能(例如:它会自动切换到移动设备上的自定义键盘布局): 因此,有没有办法关闭或自定义自动验证? 回答1 如果要禁用HTML5中表单的客户端验证,请向表单元素添加novalidate属性。 前任: <form method="post" action="/foo" novalidate>...</form> 参见https://www.w3.org/TR/html5/sec-forms.html#element-attrdef-form-novalidate 回答2 我已阅读该规范并在Chrome中进行了一些测试,如果您发现“无效”事件并返回false,则似乎可以提交表单。 我正在使用带有此HTML的jquery。 // suppress "invalid" events on URL