我在一个 html 页面上有两个表单 登录表单和注册表单
我希望当我单击相应的“跨度”按钮时能够在表单之间切换
页面加载时应仅显示登录表单，但顶部会显示登录和注册“span”按钮
当我单击登录时，我希望“隐藏”登录表单并显示注册表单，反之亦然。
这是我到目前为止的代码:
<!DOCTYPE html>
<head>
<title>Login Form</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
<span href="#" class="btn btn-default" id="toggle-login">Log in</span>
<span href="#" class="btn btn-default" id="toggle-register">Register</span>
<div id="loginForm">
<form id='login' action='' method='post' accept-charset='UTF-8'>
<fieldset>
<legend>Log In</legend>
<p><input type="text" name="login" value="" placeholder="studentID"></p>
<p><input type="password" name="password" value="" placeholder="Password"></p>
<p class="submit"><input type="submit" name="commit" value="Login"></p>
</fieldset>
</form>
</div>
<div id="registerForm">
<form id='register' action='' method='post' accept-charset='UTF-8'>
<fieldset >
<legend>Register</legend>
<input type='hidden' name='submitted' id='submitted' value='1'/>
<p><label for='username' >UserName*:</label> <input type='text' name='username' id='username' maxlength="50" /></p>
<p><label for='name'>First Name*: </label> <input type='text' name='name' id='firstName' maxlength="50" /></p>
<p><label for='name'>Second Name*: </label> <input type='text' name='name' id='secondNname' maxlength="50" /></p>
<p><label for='email' >Email Address*:</label> <input type='text' name='email' id='email' maxlength="50" /></p>
<p><label for='password' >Password*:</label> <input type='password' name='password' id='password' maxlength="50" /></p>
<input type='submit' name='Submit' value='Submit' />
</fieldset>
</form>
</div>
<script>
</script>
</body>
</html>
谢谢!
最佳答案
useExtending 来自 Erick Souza 的回答。您还可以向不想验证的表单添加“formnovalidate”属性。这将导致一个表单在提交时验证，而不是另一个表单。根据我的经验，您不能简单地隐藏一种表单并验证另一种表单。因为提交按钮将尝试验证这两种表单。
这个想法可能看起来像:
$("#toggle-login").click(function(){
$("#register").hide().attr("formnovalidate");
$("#login").toggle();
});
$("#toggle-register").click(function(){
$("#login").hide().attr("formnovalidate");
$("#register").toggle();
});
要在页面加载时强制元素行为，您应该使用以下基本处理程序:
$("document").ready(function(){
$("#register").hide();
};
这应该可以解决问题。或者在你的CSS文档中你可以使用属性display: none;
关于javascript - html jquery 在两种形式之间切换，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28904965/