小编典典

提交到php之前先验证表单

ajax

您好,我正在实现一个登录页面,从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>

阅读 324

收藏
2020-07-26

共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>
2020-07-26