使用php表单验证的jQuery弹出窗口

时间:2013-04-24 05:37:03

标签: php forms jquery-plugins bpopup

我有一个注册页面

<form class="register" action="regist.php" method="post" >
                    <h3>Register</h3>
                    <div class="column">
                        <div>
                            <label>First Name:</label>
                            <input type="text" name="f_name"/>
                            <span ></span>
                        </div>
                        <div>
                            <label>Last Name:</label>
                            <input type="text" name="l_name"/>
                            <span class="error">This is an error</span>
                        </div>
                        <div>
                            <label>mobile:</label>
                            <input type="text" name="mobile"/>
                            <span class="error">This is an error</span>
                        </div>
                    </div>
                    <div class="column">
                        <div>
                            <label>Username:</label>
                            <input type="text"name="user"/>
                            <span >This is an error</span>
                        </div>
                        <div>
                            <label>Email:</label>
                            <input type="text" name="email"/>
                            <span class="error">This is an error</span>
                        </div>
                        <div>
                            <label>Password:</label>
                            <input type="password" name="pass"/>
                            <span class="error">This is an error</span>
                        </div>
                    </div>
                    <div class="bottom">
                        <div class="remember">

                        </div>
                        <input type="submit" value="Register" name="submet" />
                        <a href="index.html" rel="login" class="linkform">You have an account already? Log in here</a>
                        <div class="clear"></div>
                    </div>
                </form>

使用jquery bpopup

   $(function() {

        // Binding a click event
        // From jQuery v.1.7.0 use .on() instead of .bind()
        $('#my-button').bind('click', function(e) {

            // Prevents the default action to be triggered. 
            e.preventDefault();

            // Triggering bPopup when click event is fired
            $('#element_to_pop_up').bPopup();

        });

    }

所以当有人点击注册时,表单会弹出一切正常工作的问题是我无法对表单进行验证,因为当我填写表单后点击注册 弹出窗口将消失,因此我无法在同一表单上进行验证

我试过了 1使另一个弹出窗口显示错误,但数据不会传递给新的弹出窗口 2进行操作$_SERVER['self_request']  有人可以帮我解决这个问题吗我有一个项目可以为我的大学做3天的工作

我需要的是在将表单发送到MySQL脚本之前对同一页面中的表单或另一个弹出窗口进行验证

1 个答案:

答案 0 :(得分:0)

创建一个使用GET函数获取信息的php页面(此处称为validation.php)...

然后在输入字段中设置一些ID ...

然后制作一个这样的函数:

function checkAll(){
    var firstName = document.getElementById("f_name").value();
    var lastName = document.getElementById("l_name").value();
    $.get( "validation.php?f_name=" + firstName + "&l_name=" + lastName, function( response ) {
        // console.log( response ); // server response
        response = response.trim();
        if(response == 1){
            alert("Everything is alright");
        } else{
            alert(response);
            return false;
        }
    });
}

将表单更改为:

<form class="register" action="regist.php" method="post" onSubmit="checkAll();">

现在关键是在validation.php中,如果一切正常,那么你可以回显值1,当某些东西不正常时,你回显错误代码(或任何代码,然后使用switch子句,你可以动态地将错误添加到表单中。

return false阻止表单提交...