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

时间:2015-10-28 13:13:12

标签: jquery cakephp-3.0

我是蛋糕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');
?>

任何人帮助我。 :)

2 个答案:

答案 0 :(得分: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>

答案 1 :(得分:0)

在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>