我希望在提交空白

Question

我使用javascript进行表单验证时遇到问题。当我提交空白时，我希望在表单中看到以下消息

使用以下html和javascript代码，但它没有显示，我无法处理问题所在。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

当您使用内联侦听器时，它实际上包含在一个函数中：

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

effectivley创建了一个听众：

onsubmit = function () {
  foo();
}

请注意，没有return语句，因此侦听器返回 undefined 。要使侦听器返回 false 并因此取消提交事件，您必须包含return语句，因此：

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

变为：

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

所以现在侦听器返回函数返回的值。