jquery-ajax-php:更新后其他空输入字段上未显示错误消息

时间:2015-04-21 16:01:06

标签: php jquery ajax

我正在尝试使用jquery和ajax为我的注册表单验证发布数据,其中每个输入字段下方都会显示一条错误消息。我设法最初得到错误消息。但是当使用输入更新某些空字段时,错误消息不会显示在剩余的空字段中。请有人指出下面的脚本是否有任何问题?

<script type="text/javascript">
$(document).ready(function(){
    $('#reg-form').submit(function(event){
        // stop refreshing the page
        event.preventDefault();

        $('.reg_form').removeClass('has-error'); // remove the error class
        $('.localError').remove(); // remove the error text     
        $('#response').html("<b>Processing your info..</b>");

        var formMessages = $('#response');
        var form = $('#reg-form');
        var formData = $(this).serialize();

        $.ajax({
            type: 'POST',
            url: $(form).attr('action'),
            data: formData,
            dataType: 'JSON'

        })

        .done(function(data){

            // log data to the console
            console.log(data); 

            if (data !== '') {
                // handle errors for username
                if (data.username) {
                    $('#username-div').addClass('has-error'); // add the error class to show red input
                    $('#username-div').append('<div class="localError">' + data.username + '</div>'); // add the actual error message under our input
                }

                // handle errors for password ---------------
                if (data.password) {
                    $('#password-div').addClass('has-error'); // add the error class to show red input
                    $('#password-div').append('<div class="localError">' + data.password + '</div>'); // add the actual error message under our input
                }

                // handle errors for conf_pass ---------------
                if (data.conf_pass) {
                    $('#conf_pass-div').addClass('has-error'); // add the error class to show red input
                    $('#conf_pass-div').append('<div class="localError">' + data.conf_pass + '</div>'); // add the actual error message under our input
                }

            }
            else {
                //Turn the response alert into a success alert
                $('#response').addClass('alert-success');
                $('#response').removeClass('alert-error');
                //Add the success message text into the alert
                $('#response').html("<i class='success'></i> Form validated successfully!").fadeIn();
            }

        })

        .fail(function() {
            // just in case posting your form failed
            alert( "Error.." );

        });  
        return false;

    });
});
</script>

regsiter.php

<div id="reg">
        <!-- where the response will be displayed -->
        <div id='response'></div>&nbsp;

        <form action="register-handler.php" method="POST" id="reg-form">
            <div id='username-div' class='reg_form'>
            <label for="username" >Username:</label></br>               
            <input type="text" name="username" id="username"  autocomplete="off">&nbsp;
            </div>&nbsp;

            <div id='password-div' class='reg_form'>
            <label for="password" >Password:</label></br>
            <input type="password" name="password" id="password" >&nbsp;
            </div>&nbsp;

            <div id='conf_pass-div' class='reg_form'>
            <label for="conf_pass" >Confirm Password:<label></br>
            <input type="password" name="conf_pass" id="conf_pass" >&nbsp;
            </div>&nbsp;

            <div></div>
            <input type="hidden" name="token" value="<?php echo Token::generate(); ?>">
            <input type="submit" value="submit"></td>

        </form>
    </div>

寄存器handler.php

<?php
require_once 'core/init.php';
if(Input::exists()){
    if(Token::check(Input::get('token'))) {

        $validate = new Validate();
        $validation = $validate->check($_POST, array(
            'username' => array(
                'required' => true,
                'min' => 2,
                'max' => 20,
                'unique' => 'users'
            ),
            'password' => array(
                'required' => true,
                'min' => 6
            ),
            'conf_pass' => array(
                'required' => true,
                'matches' => 'password'
            )
        ));

        if($validation->passed()) {
            //register user
            $user = new User();

            $salt = Hash::salt(32);     

            try {

                $user->create(array(
                    'username' => Input::get('username'),
                    'password' => Hash::make(Input::get('password'), $salt),
                    'salt' => $salt
                ));

                Session::flash('home', 'You have been registered and can now log in!');
                Redirect::to('index.php');

            } catch(Exception $e) {
                die($e->getMessage());
            }
        }
        else {
            //output errors
            header('Content-Type: application/json');
        echo json_encode($validation->errors());
            }
        }
    }
}
?>

validate.php

<?php
class Validate {
    private $_passed = false,
            $_errors = array()

    public function check($source, $items = array()) {
        foreach ($items as $item => $rules) {
            foreach ($rules as $rule => $rule_value) {

                $value = trim($source[$item]);
                $item = escape($item);

                if ($rule === 'required' && empty($value)) {
                    $this->addError($item, "{$item} is empty");
                } else if (!empty($value)) {
                    switch ($rule) {
                        case 'min':
                            if (strlen($value) < $rule_value) {
                                $this->addError($item, "{$item} must be a minimum of {$rule_value} characters.");
                            }
                            break;
                        case 'max':
                            if (strlen($value) > $rule_value) {
                                $this->addError($item, "{$item} must be a maximum of {$rule_value} characters.");
                            }
                            break;
                        case 'matches':
                            if ($value != $source[$rule_value]) {
                            $this->addError($item, "{$rule_value} must match {$item}");
                            }
                            break;                  
                    }
                }
            }

        }
        if (empty($this->_errors)) {
            $this->_passed = true;
        }
        return $this;
    }

    private function addError($key, $error) {
        $this->_errors[$key] = $error;
    }

    public function errors() {
        return $this->_errors;
    }   

    public function passed() {
        return $this->_passed;
    }
}
?>

0 个答案:

没有答案