如何在 cake php 3.0 中进行 jquery 验证

Question

我是蛋糕 PHP 新手。

如何在 cake php3.0 中进行 jquery 自定义验证

在我的 add.ctp 文件代码下方。

<h2>Add New User</h2>

<!-- link to add new users page -->
<div class='upper-right-opt'>
<?php echo $this->Html->link( 'List Users', array( 'action' => 'index' ) ); ?>
</div>

<?php 

echo $this->Form->create('User');

echo $this->Form->input('firstname');
echo $this->Form->input('lastname');
echo $this->Form->input('mobile');
echo $this->Form->input('email');
echo $this->Form->input('username');
echo $this->Form->input('password', array('type'=>'password'));

echo $this->Form->end('Submit');
?>

任何人都可以帮助我。 :)

Answer 1

<h2>Add New User</h2>


<div class='upper-right-opt'>
<?php echo $this->Html->link( 'List Users', array( 'action' => 'index' ) ); ?>
</div>

<?php 

echo $this->Form->create('User', array('id' => 'form1'));

echo $this->Form->input('firstname');
echo $this->Form->input('lastname');
echo $this->Form->input('mobile');
echo $this->Form->input('email');
echo $this->Form->input('username');
echo $this->Form->input('password', array('type&#
39;=>'password'));

echo $this->Form->end('Save');
?>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>;

<script type="text/javascript">
$(document).ready(function(){
    $("input[type='submit']").click(function(){
        var isValid = true;
        var focusInput = null;
        var firtName = $("input[name='data[User][firstname]']");
        var lastName = $("input[name='data[User][lastname]']");
        var mobile = $("input[name='data[User][mobile]']");
        var email = $("input[name='data[User][email]']");
        var username = $("input[name='data[User][username]']");
        var password = $("input[name='data[User][password]']");
        if ($(firtName) == null || $(firtName).val() == null || $(firtName).val() == "") {
            if (focusInput == null)
                focusInput = $(firtName);
            $(firtName).addClass("error");

            isValid = false;
        }
        else
            $(firtName).removeClass("error");

        if ($(lastName).val() == null || $(lastName).val() == "") {
            if (focusInput == null)
                focusInput = $(lastName);
            $(lastName).addClass("error");
            isValid = false;
        }
        else
            $(lastName).removeClass("error");

        if ($(mobile).val() == null || $(mobile).val() == "") {
            if (focusInput == null)
                focusInput = $(mobile);
            $(mobile).addClass("error");
            isValid = false;
        }
        else
            $(mobile).removeClass("error");

        if ($(email).val() == null || $(email).val() == "") {
            if (focusInput == null)
                focusInput = $(email);
            $(email).addClass("error");
            isValid = false;
        }
        else
            $(email).removeClass("error");

         if ($(username).val() == null || $(username).val() == "") {
            if (focusInput == null)
                focusInput = $(username);
            $(username).addClass("error");
            isValid = false;
        }
        else
            $(username).removeClass("error");

         if ($(password).val() == null || $(password).val() == "") {
            if (focusInput == null)
                focusInput = $(password);
            $(password).addClass("error");
            isValid = false;
        }
        else
            $(password).removeClass("error");

        if (!isValid)
            $(focusInput).focus();

        return isValid;

    });     
});

</script>

Answer 2

将此代码添加到您的 ctp 文件中：

<?php
//this is our add form, name the fields same as database column names
echo $this->Form->create('User', array('id' => 'form1'));

echo $this->Form->input('firstname');
echo $this->Form->input('lastname');
echo $this->Form->input('mobile');
echo $this->Form->input('email');
echo $this->Form->input('password', array('type' => 'password'));
echo $this->Form->button(('Save')); 
echo $this->Form->end();
?>          
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://jqueryvalidation.org/files/dist/jquery.validate.min.js"></script>

<script>
    $('#form1').validate({
        rules: {
            'firstname': {
                required: true,
            },
            'lastname': {
                required: true,
            },
            'interest_loan': {
                required: true,
            },
            'mobile': {
                required: true,
                number: true,
            },
            'email': {
                required: true,
                email: true,
            },
            'password': {
                required: true,
            },
        },
        messages: {
            'firstname': {
                required: "Please enter name",
            },
            'lastname': {
                required: "Please enter last name",
            },
            'email': {
                required: "Please enter email",
            },
            'password': {
                required: "Please enter password",
            },
            'mobile': {
                required: "Please enter mobile number",
            },
        },
    });
</script>