1

我有一个注册表单。我想在客户端本身实现一些验证。我正在使用按钮提交表单。 

<button onclick="check_fields();"></button>

 function check_fields() {          
       if(document.contact_form.name.value=='')                                                     
           document.contact_form.name.focus();
       else 
           document.getElementById("contact_form").submit();    
   }

焦点没有发生，而是表单成功提交。请帮忙。

4

5 回答 5

3

最好的方法是使用id

说，你有这样定义的文本字段：

<input type="text" name="contact" id="contact" />

在您的 JavaScript 中，最好采用这种方式：

document.getElementById("contact").focus();
于 2012-12-30T15:57:01.340 回答
1

因为document.contact_form.name可能不是您的文本字段。您的输入字段的名称属性是什么？

如果它的名字是例如 myfield，你应该使用：

if(document.contact_form.myfield.value === '') {
   document.contact_form.myfield.focus();
} else { ... }
于 2012-12-30T15:53:27.530 回答
0

如果您正确设置了 html 部分，它应该可以工作。如果不是，您应该在开发者控制台（在 chrome 或 firefox 中）中看到 javascript 异常。

请注意，您以两种方式访问​​表单，一种document.contact_form建议您使用 name="contact_form"，另一种document.getElementById("contact_form")建议您使用 id="contact_form"，您是否在 html 中设置了两种方式？IE。是否为表单元素设置了名称和 ID？

于 2012-12-30T16:12:15.293 回答
0

您好，您似乎正试图将焦点转移到验证错误上的表单元素上。我建议您将控制权转移到作为“表单”元素一部分的输入元素。

此外，您还可以验证表单的“onsubmit”事件的输入，而不是单击按钮。例如：

<form name="myForm" onsubmit="return validate();"> </form>

//validate function on validation failure returns false else true.
// if validate returns false the browser wouldn't submit the form.

您可以使用以下代码片段来关注您选择的元素

document.getElementById("elementId").focus();
于 2012-12-30T16:12:49.850 回答
0

我有这个，希望对你有所帮助，我在 JavaScript 中使用 focus() 来提示或设置焦点，如果我在不提供任何值的情况下单击保存或输入按钮，则会先触发警报，然后当你单击确定，焦点将出现在相应的文本字段中：

<script type="text/javascript">
         function validate() /* Validate the if the user leave any field empty. */
         {
             var a = document.getElementById("userid");
             var b = document.getElementById("passwrd");
             var c = document.getElementById("fname");
             var d = document.getElementById("lname");
             var e = document.getElementById("email");
             var f = document.getElementById("phnno");
             var g = document.getElementById("cellphone");
             var h = document.getElementById("fax");
                          
             var valid = true;
             if(a.value.length<=0) {
            	 a.focus();
                 alert("Don't leave 'USER NAME' field empty!");
                 valid = false;
             }
             else if(b.value.length<=0){
            	 b.focus();
                 alert("Don't leave 'PASSWORD' field empty!");
                 valid = false;
             }
             else if(c.value.length<=0){
            	 c.focus();
                 alert("Don't leave 'FIRST NAME' field empty!");
                 valid = false;
             }
             else if(d.value.length<=0){
            	 d.focus();
                 alert("Don't leave 'LAST NAME' field empty!");
                 valid = false;
             }
             else if(e.value.length<=0){
            	 e.focus();
                 alert("Don't leave 'USER EMAIL' field empty!");
                 valid = false;
             }
             else if(f.value.length<=0){
            	 f.focus();
                 alert("Don't leave 'PHONE NUMBER' field empty!");
                 valid = false;
             }
             else if(g.value.length<=0){
            	 g.focus();
                 alert("Don't leave 'CELLPHONE NUMBER' field empty!");
                 valid = false;
             }
             else if(h.value.length<=0){
            	 h.focus();
                 alert("Don't leave 'FAX NUMBER' field empty!");
                 valid = false;
             }
                          
         return valid;
         };
         
     </script
<s:form action="userAction_createUser" method="get"  name = "userForm" accept-charset="utf-8" onsubmit="return validate();">
				   				    
				        <!-- Display the values in the application -->
                        <table class="createUserT">
							<s:textfield name="user.userid" id="userid" cssClass="tb5" label="User Name" /> 
							<s:textfield name="user.passwrd" id="passwrd" cssClass="tb5" label="Password" type="password"/>
							<%-- <s:textfield name="user.passwrd" cssClass="tb5" label="passwrd" type="password"/> --%>
						</table>
						<table class="createUserT">
						    <s:textfield name="user.fname" id="fname" cssClass="tb5" label="First Name"/>
						    <s:textfield name="user.lname" id="lname" cssClass="tb5" label="Last Name"/> 
						</table>
						<table class="createUserT">
							<s:textfield name="user.email" id="email" cssClass="tb5" label="User Email" type="email"/>
                            <s:textfield name="user.phnno" id="phnno" cssClass="tb5" label="Phone Number"/>
						</table>
						<table class="createUserT">
                            <s:textfield name="user.cellphone" id="cellphone" cssClass="tb5" label="Cellphone Number"/>
                            <s:textfield name="user.fax" id="fax" cssClass="tb5" label="Fax Number"/>
						</table>

于 2014-10-23T17:31:31.523 回答