I have a sign up form. I want to implement some validation at client end itself. I am using a button to submit a form.

<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();   
}

Focus is not happening, instead form is successfully submitting. Please help.

I have a sign up form. I want to implement some validation at client end itself. I am using a button to submit a form.

<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();   
}

Focus is not happening, instead form is successfully submitting. Please help.

• javascript

• Can you show the HTML for the form? – Praveen Kumar Purushothaman Commented Dec 30, 2012 at 15:54
• please paste code of plete form – Mudassir Hasan Commented Dec 30, 2012 at 15:54
• 1 Can you share the DOM structure of your form element, is the "Submit" button part of the form element or a seperate button which isn't child element of <form> element. It would be more clear if you can share more information. – Mrugen Deshmukh Commented Dec 30, 2012 at 15:57

5 Answers 5

The best way to do is using an id

Say, you have the textfield defined this way:

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

In your JavaScript, it would be nice to give this way:

document.getElementById("contact").focus();

Because document.contact_form.name is probably not your textfield. What is your input field's name attribute?

If its name is e.g. myfield, you should use:

if(document.contact_form.myfield.value === '') {
   document.contact_form.myfield.focus();
} else { ... }

It should work if you setup the html part correctly. If not you should see javascript exceptions in developer console (in chrome or firefox).

Note that you access the form in two ways, one document.contact_form suggests you have name="contact_form" and one document.getElementById("contact_form") suggests you have id="contact_form", did you set both ways in the html? ie. are both name and id set for the form element?

Hi it looks like you are trying to transfer focus on form element on validation errors. I would suggest that you transfer control over to a input element which is part of your "form" element.

Morever you can also validate the input on "onsubmit" event of the form rather than the button click. for example:

<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.

you can use following code snippet to get focus on element of your choice

document.getElementById("elementId").focus();

I have this, I hope this help you, I use focus() in a JavaScript to prompt or set the focus in the and if I click on save or input button without supplying any value, an alert it will be trigger first then when you click ok, the focus will appear in the corresponding textfield:

<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>