I want to see Form validation message when it is submitted blank

Question

I have problem with form validation using javascript. I would like to see following message in my form when I submit it blank

By using following html and javascript code but it's not showing and I am failing to handle it where is the problem .

<!-- javascript code -->

	<script type="text/javascript">

	function validate(){
		
		
		if(document.frm.username.value == ""){
			document.getElementById("text").innerHTML = "Fill up the username.";
			document.frm.username.focus();
			return false;
		}

	 
		if(document.frm.password.value ==""){
			document.getElementById("text").innerHTML = "Fill up the password.";
			document.frm.password.focus();
			return false;
		}
 
		if(document.frm_validate.confirmPassword.value == ""){
			document.getElementById("text").innerHTML = "Fill up the confirm password.";
			document.frm.confirmPassword.focus();
			return false;
		}
 
		if(document.frm_validate.firstName.value == ""){
			document.getElementById("text").innerHTML = "Fill up the first name.";
			document.frm.firstName.focus();
			return false;
		}


		if(document.frm_validate.email.value == ""){
			document.getElementById("text").innerHTML = "Fill up the email.";
			document.frm.email.focus();
			return false;
		}

		return true;
	}

	


	</script>

  <!-- form validation -->

                <form class="form-horizontal frm_validate" name="frm" action="#" onsubmit="validate()">
                    <fieldset>
                        <legend>Form Validation</legend>
                        <div class="form-group">
                            <label for="inputName" class="col-lg-3 control-label">Username<span class="star">  *</span></label>
                            <div class="col-lg-9">
                                <input class="form-control" id="inputName" placeholder="Name" type="text" name="username">
                                <span id="text"></span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="inputPassword" class="col-lg-3 control-label">Password<span class="star">  *</span></label>
                            <div class="col-lg-9">
                                <input class="form-control" id="inputPassword" placeholder="....." type="text" name="password">
                                <span id="text"></span>
                            </div>
                        </div>
                        
                        <div class="form-group">
                            <label for="confirmPassword" class="col-lg-3 control-label">Confirm Password<span class="star">  *</span></label>
                            <div class="col-lg-9">
                                <input class="form-control" id="confirmPassword" placeholder="....." type="text" name="confirmPassword">
                                <span id="text"></span>
                            </div>
                        </div>
                        
                        <div class="form-group">
                            <label for="firstName" class="col-lg-3 control-label">First Name<span class="star">  *</span></label>
                            <div class="col-lg-9">
                                <input class="form-control" id="firstName" placeholder="First Name" type="text" name="firstName">
                                <span id="text"></span>
                            </div>
                        </div>
                        
                        <div class="form-group">
                            <label for="lastName" class="col-lg-3 control-label">Last Name</label>
                            <div class="col-lg-9">
                                <input class="form-control" id="lastName" placeholder="Last Name" type="text">
                            </div>
                        </div>
                        
                        <div class="form-group">
                            <label for="inputEmail" class="col-lg-3 control-label">Email<span class="star">  *</span></label>
                            <div class="col-lg-9">
                                <input class="form-control" id="inputEmail" placeholder="Email" type="text" name="email">
                                <span id="text"></span>
                            </div>
                        </div>

						<div class="form-group">
                            <div class="col-lg-9 col-lg-offset-3">
                                <p><span class="star">*  </span>Required field</p>
                            </div>
                        </div>




                        <div class="form-group">
                            <div class="col-lg-9 col-lg-offset-3">
                                <button type="reset" class="btn btn-default">Cancel</button>
                                <button type="submit" class="btn btn-primary">Submit</button>
                            </div>
                        </div>

Answer 1

When you use an inline listener, it is effectively wrapped in a function:

<form onsubmit="foo()" ...>

effectivley creates a listener like:

onsubmit = function () {
  foo();
}

note that there is no return statement, so the listener returns undefined. To get the listener to return false and hence cancel the submit event, you must include a return statement, so:

    <form onsubmit="return foo()" ...>

becomes:

onsubmit = function () {
  return foo();
}

so now the listener returns the value returned by the function.