使用javascript进行codeigniter弹出模型验证

Question

how to validation using javascript popup model in codeigniter

登录代码如下所示

登录页面中显示的以下代码我尝试了很多次验证方法，但我没有得到

<form  id="register-form" action="<?php echo base_url(); ?>Index.php/Login_cntrl/login" method="POST" >
<div class="field-wrap">
<label class="view-label">Email Address</label>
<input type="email" placeholder="Email Address" name="email" id="email" class="input-control" value=""/>
</div>
<div class="field-wrap">
<input type="password" placeholder="Password" name="password" id="password" value="" />
<a href="javascript:void(0)" class="btn btn-link btn-nobg" id="btn-show-forgot" >Forgot ?</a>  
</div>
<div class="field-wrap">
<button type="submit" class="btn btn-submit" name="ulogin" id="ulogin" value="ulogin" >Login</button>
</div>
<div class="field-wrap">
<a href="javascript:void(0)" class="btn btn-link btn-nobg" id="btn-show-signup">NEW User? Sign up</a>
</div>
</form>

validation.js

<script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
<script type="text/javascript" src="<?php echo base_url(); ?>js/validation.js"></script>

    $(function() {
     $("#register-form").validate({     
    // Specify the validation rules
    rules: {
    email: {
    required: true,
    email: true
    },
    password: {
    required: true,       
    maxlength: 8
    }               
    },
    // Specify the validation error messages
    messages: {
    email: "Please enter your email",
    password: "Please enter your password",
    },
    submitHandler: function(form) {
    form.ulogin();
    }
    });
    });

Answer 1

下面的 JavaScript 代码正在运行。

$(function() {

    // Setup form validation on the #register-form element
    $("#btn-show-forgot").validate({
       //ignore: [],
        // Specify the validation rules
        rules: {

        email: {
                 required: true,
           email: true

            }


        },

        // Specify the validation error messages
        messages: {
            email: "Please enter your firstname",

        },

        submitHandler: function(form) {
            form.submit();
        }
    });
});

Answer 2

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="http://formvalidation.io/bundles/0a3b9034e109d88d72f83c9e6c9d13b7.js"></script>
<form id="contactForm" method="post" class="form-horizontal">
    <div class="form-group">
        <label class="col-xs-3 control-label">Full name</label>
        <div class="col-xs-4">
            <input type="text" class="form-control" name="fullName" />
        </div>
        <div class="col-xs-5 messageContainer"></div>
    </div>

    <div class="form-group">
        <label class="col-xs-3 control-label">Email</label>
        <div class="col-xs-4">
            <input type="text" class="form-control" name="email" />
        </div>
        <div class="col-xs-5 messageContainer"></div>
    </div>

    <div class="form-group">
        <label class="col-xs-3 control-label">Title</label>
        <div class="col-xs-4">
            <input type="text" class="form-control" name="title" />
        </div>
        <div class="col-xs-5 messageContainer"></div>
    </div>

    <div class="form-group">
        <label class="col-xs-3 control-label">Content</label>
        <div class="col-xs-4">
            <textarea class="form-control" name="content" rows="5"></textarea>
        </div>
        <div class="col-xs-5 messageContainer"></div>
    </div>

    <div class="form-group">
        <div class="col-xs-9 col-xs-offset-3">
            <button type="submit" class="btn btn-default">Validate</button>
        </div>
    </div>
</form>

<script>
$(document).ready(function() {
    $('#contactForm').formValidation({
        framework: 'bootstrap',
        err: {
            container: function($field, validator) {
                // Look at the markup
                //  <div class="col-xs-4">
                //      <field>
                //  </div>
                //  <div class="col-xs-5 messageContainer"></div>
                return $field.parent().next('.messageContainer');
            }
        },
        icon: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            fullName: {
                validators: {
                    notEmpty: {
                        message: 'The full name is required and cannot be empty'
                    }
                }
            },
            email: {
                validators: {
                    notEmpty: {
                        message: 'The email address is required and cannot be empty'
                    },
                    emailAddress: {
                        message: 'The email address is not valid'
                    }
                }
            },
            title: {
                validators: {
                    notEmpty: {
                        message: 'The title is required and cannot be empty'
                    },
                    stringLength: {
                        max: 100,
                        message: 'The title must be less than 100 characters long'
                    }
                }
            },
            content: {
                validators: {
                    notEmpty: {
                        message: 'The content is required and cannot be empty'
                    },
                    stringLength: {
                        max: 500,
                        message: 'The content must be less than 500 characters long'
                    }
                }
            }
        }
    });
});
</script>

or check this link

http://formvalidation.io/examples/showing-message-custom-area/callback/bootstrap.html

根据我的表格，我已经进行了修改，但它不起作用，如果出现问题，请告诉我

<script>
$(document).ready(function() {
    $('#contactForm').formValidation({
        framework: 'bootstrap',
        err: {
            container: function($field, validator) {
                // Look at the markup
                //  <div class="col-xs-4">
                //      <field>
                //  </div>
                //  <div class="col-xs-5 messageContainer"></div>
                return $field.parent().next('.messageContainer');
            }
        },
        icon: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: 
            email: {
                validators: {
                    notEmpty: {
                        message: 'The email address is required and cannot be empty'
                    }

                }
            }

        }
    });

</script>