Question

此表单上的错误消息（'after'）应默认隐藏，仅在用户按下“Register”提交按钮时显示。但是，默认情况下会显示所有错误消息 - 有什么帮助可以说明为什么这不起作用？ javascript文件正在打印到控制台，以便它可以找到该文件。我把PHP用于表单和下面的javascript - 非常感谢任何帮助，谢谢，

这是显示表单的PHP：

<div class="span5 pull-right reg-form hidden">
    <?php
    echo $this->Form->create('Users.Register', array(
        'url' => '/register',
        'class' => 'span12 pull-right'));

    echo $this->Form->hidden('current_url', array('value' => $this->here));
    echo $this->Form->input('username', array(
        'class' => 'reg-input',
        'label' => array('text' => 'Email:', 'class' => 'reg-label main-color'),
        'div' => array('class' => 'span12 reg-div'),
        'required' => FALSE,
        'after' => '<span class="hidden show-email-err show-err">This email address is already taken</span>
            <span class="hidden show-emailvalid-err show-err">This email is not valid</span>'
    ));
    echo $this->Form->input('confirm_username', array(
        'class' => 'reg-input',
        'label' => array('text' => 'Confirm Email:', 'class' => 'reg-label main-color'),
        'div' => array('class' => 'span12 reg-div'),
        'required' => FALSE,
        'after' => '<span class="hidden show-user-err show-err">Re-email is incorrect</span>'
    ));
    echo $this->Form->input('password', array(
        'class' => 'reg-input',
        'label' => array('text' => 'Password:', 'class' => 'reg-label main-color'),
        'div' => array('class' => 'span12 reg-div'),
        'required' => FALSE,
        'after' => '<span class="hidden show-pass-long show-err">Password must be at least 6 characters</span>'
    ));
    echo $this->Form->input('confirm_password', array(
        'class' => 'reg-input',
        'type' => 'password',
        'label' => array('text' => 'Confirm Password:', 'class' => 'reg-label main-color'),
        'div' => array('class' => 'span12 reg-div'),
        'required' => FALSE,
        'after' => '<span class="hidden show-pass-err show-err">Re-password is incorrect</span>'
    ));
    echo $this->Form->input('firstname', array(
        'class' => 'reg-input',
        'label' => array('text' => 'Name:', 'class' => 'reg-label main-color'),
        'div' => array('class' => 'span12 reg-div'),
        'required' => FALSE,
        'after' => '<span class="hidden show-firstname-err show-err">This field must not empty</span>'
    ));
    echo $this->Form->input('lastname', array(
        'class' => 'reg-input',
        'label' => array('text' => 'Last Name:', 'class' => 'reg-label main-color'),
        'div' => array('class' => 'span12 reg-div'),
        'required' => FALSE,
        'after' => '<span class="hidden show-lastname-err show-err">This field must not empty</span>'
    ));
    ?>
    <?php echo $this->Form->end(array('label' => 'Register', 'div' => false, 'id' => 'RegSubmit', 'class' => 'btn-sign pull-right')); ?>
</div>

这是javascript：

(function($){
    /** $(document).ready(function(){}) */
    $(function(){ 
        console.log('cover');
   /*     
        $('#btn-reg').on('click', function(){
            $('#RegisterUsername').val($('#LoginUsername').val());
            $('.reg-form').removeClass('hidden');
        });
      */  
        $('#RegSubmit').on('click', function(e) {
            //console.log(e);
            if($('.show-user-err').attr('class').indexOf('hidden') < 0)
                $('.show-user-err').addClass('hidden');
            var username = $('#RegisterUsername').val(),
                re_username = $('#RegisterConfirmUsername').val(),
                password = $('#RegisterPassword').val(),
                re_password = $('#RegisterConfirmPassword').val(),
                firstname = $('#RegisterFirstname').val(),
                lastname = $('#RegisterLastname').val();

                var check = 0;
                var email_regex = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
            $.each(user_emails, function(index, value){
                if(value==username){
                    check = 1;
                }
            });
            if(check == 1){
                $('.show-err').addClass('hidden');
                $('.show-email-err').removeClass('hidden');
                return false;
            }
            if(!email_regex.test(username) || username == '') {
                $('.show-err').addClass('hidden');
                $('.show-emailvalid-err').removeClass('hidden');
                return false;
            }
            if(username != re_username){
                $('.show-err').addClass('hidden');
                $('.show-user-err').removeClass('hidden');
                return false;
            }
            if(password.length < 6){
                $('.show-err').addClass('hidden');
                $('.show-pass-long').removeClass('hidden');
                return false;
            }
            if(password != re_password){
                $('.show-err').addClass('hidden');
                $('.show-pass-err').removeClass('hidden');
                return false;
            }
            if(firstname == ''){
                $('.show-err').addClass('hidden');
                $('.show-firstname-err').removeClass('hidden');
                return false;
            }
            if(lastname == ''){
                $('.show-err').addClass('hidden');
                $('.show-lastname-err').removeClass('hidden');
                return false;
            }

        });
    });

})(jQuery);

Answer 1

我猜其他类似show-err的其中一个有display：block，它覆盖了隐藏的类。如果你在Chrome或Firefox中检查元素，那么它应该显示正在应用的CSS规则。

javascript没有隐藏形式

1 个答案: