以下是我的身份验证模式的代码。请告诉我应该如何更改我的JavaScript以防止空登录提交。
<div class="cd-user-modal">
<!-- this is the entire modal form,
including the background -->
<div class="cd-user-modal-container">
<!-- this is the container wrapper -->
<ul class="cd-switcher">
<li><a href="#0">Sign in</a></li>
<li><a href="#0">New account</a></li>
</ul>
<div id="cd-login"> <!-- log in form -->
<form class="cd-form">
<p class="fieldset">
<label class="image-replace cd-email"
for="signin-email">E-mail</label>
<input class="full-width has-padding has-border"
id="signin-email" type="email" placeholder="E-mail">
<span class="cd-error-message">Error message here!</span>
</p>
<p class="fieldset">
<label class="image-replace cd-password"
for="signin-password">Password</label>
<input class="full-width has-padding has-border"
id="signin-password" type="text" placeholder="Password">
<a href="#0" class="hide-password">Hide</a>
<span class="cd-error-message">Error message here!</span>
</p>
<p class="fieldset">
<input type="checkbox" id="remember-me" checked>
<label for="remember-me">Remember me</label>
</p>
<p class="fieldset">
<input class="full-width" type="submit" value="Login">
</p>
</form>
<p class="cd-form-bottom-message">
<a href="#0">Forgot your password?</a></p>
<!-- <a href="#0" class="cd-close-form">Close</a> -->
</div> <!-- cd-login -->
<div id="cd-signup"> <!-- sign up form -->
<form class="cd-form">
<p class="fieldset">
<label class="image-replace cd-username"
for="signup-username">Username</label>
<input class="full-width has-padding has-border"
id="signup-username" type="text" placeholder="Username">
<span class="cd-error-message">Error message here!</span>
</p>
<p class="fieldset">
<label class="image-replace cd-email"
for="signup-email">E-mail</label>
<input class="full-width has-padding has-border"
id="signup-email" type="email" placeholder="E-mail">
<span class="cd-error-message">Error message here!</span>
</p>
<p class="fieldset">
<label class="image-replace cd-password"
for="signup-password">Password</label>
<input class="full-width has-padding has-border"
id="signup-password" type="text" placeholder="Password">
<a href="#0" class="hide-password">Hide</a>
<span class="cd-error-message">Error message here!</span>
</p>
<p class="fieldset">
<input type="checkbox" id="accept-terms">
<label for="accept-terms">I agree to the <a href="#0">Terms</a></label>
</p>
<p class="fieldset">
<input class="full-width has-padding" type="submit"
value="Create account">
</p>
</form>
<a href="#0" class="cd-close-form">Close</a>
</div> <!-- cd-signup -->
<div id="cd-reset-password"> <!-- reset password form -->
<p class="cd-form-message">Lost your password? Please enter your
email address. You will receive a link to create a new password.</p>
<form class="cd-form">
<p class="fieldset">
<label class="image-replace cd-email" for="reset-email">
E-mail</label>
<input class="full-width has-padding has-border"
id="reset-email" type="email" placeholder="E-mail">
<span class="cd-error-message">Error message here!</span>
</p>
<p class="fieldset">
<input class="full-width has-padding" type="submit"
value="Reset password">
<a href="#0" class="cd-close-form">Close</a>
</p>
</form>
<p class="cd-form-bottom-message"><a href="#0">Back to log-in</a> </p>
</div> <!-- cd-reset-password -->
</div> <!-- cd-user-modal-container -->
</div> <!-- cd-user-modal -->
//EDIT THIS - it's just to show error messages
formLogin.find('input[type="submit"]').on('click', function(event){
event.preventDefault();
formLogin.find('input[type="email"]').toggleClass('has-error').next('span').toggleClass('is-visible');
});
formSignup.find('input[type="submit"]').on('click', function(event){
event.preventDefault();
formSignup.find('input[type="email"]').toggleClass('has-error').next('span').toggleClass('is-visible');
});
答案 0 :(得分：1)
我被教导做的事情与你正在进行的事情有所不同。
如果我的表格看起来像这样：
<form id="form" action="welcome/submit" method="post">
name:
<span class="warning" id="warning_0">please enter your name >>></span>
<input type="text" name="name" id="name">
email:
<span class="warning" id="warning_1">please enter your email address >>></span>
<input type="email" name="email" id="email">
phone:
<span class="warning" id="warning_2">please enter your phone >>></span>
<input type="text" name="phone" id="phone">
<input type="submit" value="SEND" id="contact_sent">
</form>
表单中的action属性是我发送已发布数据的位置。在我的例子中是一个PHP文件。
我用CSS隐藏了类'警告'：
.warning{
color:red;
display:none;}
然后使用Javascript - 在我的情况下为jQuery - 我在发送之前通过触发表单的提交上的函数来评估数据：
<script>
$('#form').submit(function(event) {
var input = [];
input[0] = $("#name").val();
input[1] = $("#email").val();
input[2] = $("#phone").val();
var ready = true;
for(i = 0; i < input.length; i++){
if(input[i].length < 1){
$('#warning_'+i).fadeIn('slow');
ready = false;
}
if(input[i].length > 0){
$('#warning_'+i).fadeOut('fast');
}
}
return ready;
});
</script>
这很酷，如果click函数返回false，那么发布的数据不会进入php文件。需要显示的警告变为可见。但如果所有内容都填写完毕，则返回true，然后关闭它进入您的服务器。
我意识到这与你的事情有点不同，但是从你拥有的东西来看，我认为你正在变得比它需要的更难。但也可能是你想要实现一些我不太了解的更复杂的东西。