在Yii上使用JavaScript验证

Question

I want to add some JavaScript validation to my form of password creation.

I have the following as javascript

function Validation(){
    var password = document.getElementById('password').value;
    var error = document.getElementById('error');

    if((/^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])[0-9a-zA-Z]+$/).test(password) == false){
        error.html('error');
    }
}

I have the following code in my _form.php for the user creation

<?php $form=$this->beginWidget('CActiveForm', array(
    'id'=>'users-form',
    'htmlOptions'=>array('onsubmit'=>'return Validation()'),
    // Please note: When you enable ajax validation, make sure the corresponding
    // controller action is handling ajax validation correctly.
    // There is a call to performAjaxValidation() commented in generated controller code.
    // See class documentation of CActiveForm for details on this.
    'enableAjaxValidation'=>false,
)); ?>

    <p class="note">Fields with <span class="required">*</span> are required.</p>

    <?php echo $form->errorSummary($model); ?>

    <div class="row">
        <?php echo $form->labelEx($model,'username'); ?>
        <?php echo $form->textField($model,'username',array('size'=>20,'maxlength'=>20)); ?>
        <?php echo $form->error($model,'username'); ?>
    </div>

    <div class="row">
        <?php echo $form->labelEx($model,'password'); ?>
        <?php echo $form->passwordField($model,'password',array('size'=>60,'maxlength'=>255)); ?>
        <?php echo $form->error($model,'password'); ?>
    </div>

    <div class="row buttons">
        <?php echo CHtml::submitButton($model->isNewRecord ? 'Create' : 'Save'); ?>
    </div>
    <div id="error">

    </div>

<?php $this->endWidget(); ?>

Now i do have my script imported and even when i put a simple alert('hello') it doesnt work when i press create.

Also i know the validation wont work properly since i am hashing the password. How i can validate it before it becomes hash.

Answer 1

You can do it two way

1) With form htmlOptions

<?php Yii::app()->clientScript->registerScript('someScript', "

validate = function(){

        alert("Your Validation Function");
        return false;
}

");
?>
<?php $form=$this->beginWidget('CActiveForm', array(
    'id'                    =>  'user-form',
    'enableAjaxValidation'  => false,
        'htmlOptions'       => array(
                               'onsubmit'=>"return validate();",
                             ),
)); ?>

2) With Jquery submit method

<?php Yii::app()->clientScript->registerScript('someScript', "

$('#user-form').submit(function() {
    alert("Your validation");
});


");
?>
<?php $form=$this->beginWidget('CActiveForm', array(
    'id'                    =>  'user-form',
    'enableAjaxValidation'  => false,
)); ?>