JavaScript验证表单不起作用

瓦莱丽·奥斯汀

我正在尝试验证我的表单,以便如果用户不输入用户名或密码,则不允许他登录网站。出于某种原因,当我同时输入用户名和密码字段并单击login时,login.html页面不会出现。有什么帮助吗?

<script>
    window.onload = function(){
        function handleinput(){
            if(document.loginform.username.value == ""){
                document.getElementById("usernameError").innerHTML = "You must enter a username";
                return false;
            }
     
            if(document.loginform.password.value == ""){
                document.getElementById("passwordError").innerHTML = "You must enter a password";
                return false;
            }
        }
     
        document.getElementById("loginform").onsubmit = handleinput;
    }
</script>
    <form id="loginform" name="loginform" method="post">
		<div>
		<label hidden> Username</label>
			<input type= "text" class="text" placeholder="Username" title="Username" name="username">
			<span id="usernameError"></span>
			
		<label hidden> Password </label>
			<input type= "password" class="text" placeholder="Password" title="Password" name="password"> 
			<span id="passwordError"></span>
			<a href="" class="anchor-float">Forgot password?</a>
			
		</div>
			<div class="button-container">
				<a href="login.html" target="_blank"> <input type= "submit" value="Login" class="login"/>
				</a>
				<input type= "button" value="Sign up" class="login signup"/>
			</div>			
      </form>

斯科特·马库斯(Scott Marcus)

您已将Submit按钮包裹在一个a指向元素中login.html,这是在表单提交后如何正确重定向的方法。由于事件冒泡和/或捕获,这还将导致处理事件的问题

实际上,您尚未在form标签中指定表单应将其数据发送到的位置

<form id="loginform" name="loginform" method="post">

这(默认情况下)意味着表单会将其数据发送到当前页面(导致重新加载同一页面,但是在此更新的加载中可以访问表单数据)。

要将数据发送到其他页面/资源,表单需要具有一个action属性,属性指定到目标的路径:

<form id="loginform" name="loginform" method="post" action="login.html">

请参阅有关提交表格的详细信息。

Stack Overflow的代码段环境不允许进行表单提交,但请查看此Fiddle该Fiddle具有可正常使用的代码更新版本。

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

验证Javascript中的表单不起作用

来自分类Dev

JavaScript表单验证不起作用

来自分类Dev

表单验证不起作用

来自分类Dev

HTML5表单验证的Javascript代码不起作用

来自分类Dev

用于表单验证的简单Javascript不起作用

来自分类Dev

HTML5表单验证的Javascript代码不起作用

来自分类Dev

JavaScript验证在HTML表单上不起作用

来自分类Dev

Html-Javascript 表单验证不起作用

来自分类Dev

Javascript 表单验证在引导模式下不起作用

来自分类Dev

错误消息在简单的 javascript 表单验证中不起作用

来自分类Dev

为什么 Javascript 验证在 html 表单中不起作用?

来自分类Dev

Angular 2表单验证不起作用

来自分类Dev

Spring MVC表单验证不起作用

来自分类Dev

jQuery:表单验证不起作用

来自分类Dev

动态表单的jQuery验证不起作用

来自分类Dev

Codeigniter验证表单不起作用

来自分类Dev

jQuery表单验证不起作用?

来自分类Dev

Angular支持表单验证不起作用

来自分类Dev

.className在表单验证上不起作用

来自分类Dev

CakePHP表单验证不起作用

来自分类Dev

jQuery表单验证不起作用?

来自分类Dev

Angular支持表单验证不起作用

来自分类Dev

jQuery表单验证器不起作用

来自分类Dev

html表单验证不起作用

来自分类Dev

Springboot Thymeleaf 表单验证不起作用

来自分类Dev

BlockUI 在表单验证之前不起作用

来自分类Dev

PHP 表单验证不起作用

来自分类Dev

JS验证在表单之间不起作用

来自分类Dev

表单验证在 angular 中不起作用?