提交到php之前先验证表单

Question

您好，我正在实现一个登录页面，从PHP方面来看一切正常，但是现在我将使用jQuery实现另一个功能：我想检查登录字段是否为空，如果不是，则在页面上打印一些内容，否则继续用php，该怎么做？

这是我的HTML代码的一部分：

<form id="loginForm" action="login-exec.php" name="loginForm" method="post" class="ui-body ui-body-a ui-corner-all" data-ajax="false">
    <fieldset>
        <div data-role="fieldcontain">
            <label class="ui-input-text" for="login">Login:</label>
            <input name="login" type="text" class="textfield" id="login" />
        </div>                                  
        <div data-role="fieldcontain">                                      
            <label class="ui-input-text" for="password">Password:</label>
            <input name="password" type="password" class="textfield" id="password"/> 
        </div>
        <input type="submit" name="Submit" value="Login" />
    </fieldset>
</form>

Answer 1

将事件绑定到表单的提交（注意：并非单击提交按钮）。那就是您的代码去检查表单的地方，并在必要时阻止其发布。

$('#loginForm').on('submit', function(e){
    if ($('#login').val()=='' || $('#password').val()==''){
        e.preventDefault();
        // alert('Fill in both fields');
        // You can use an alert or a dialog, but I'd go for a message on the page
        $('#errormsg').text('Fill in both fields').show();
    }else{
        // do nothing and let the form post
    }
});

如果您希望显示消息而不是使用对话框，请在页面上某个位置（最好是在“提交”按钮附近）添加errormsg div

<p id="errormsg" style="display:none;"></p>