mauro.Joestar mauro.Joestar -4 years ago 123
jQuery Question

jQuery Validate plugin doesn't work in CodeIgniter

I'm trying to use the jQuery Validate plugin in a view of a CodeIgniter project using exactly like a lot of examples Internet, but doesn't work at all! I used a lot of sugerences that I found here in StackOverflow and other sites, but doesn't work. Here is my code:

<script src="<?php echo base_url(); ?>js/jquery-validation-1.16.0/dist/jquery.validate.js"></script>
<body>
<section class="content">
<div class="row">
<!-- left column -->
<div class="col-md-6">

<!-- general form elements -->
<div class="box box-primary">
<div class="box-header with-border">
<h3 class="box-title">Ingresar nueva empresa</h3>
</div>
<!-- /.box-header -->
<!-- form start -->
<form id="formIngEmpresa">

<!-- RESPUESTA DE FORMULARIO -->

<!-- FIN RESPUESTA DE FORMULARIO -->

<div class="box-body">
<div class="form-group">
<label for="usuario_login">Nombre o Razón Social de la empresa</label>
<input type="input" class="form-control" id="nm_rs_empresa" placeholder="Ingrese login">
</div>
<div class="form-group">
<label for="usuario_password">Rut empresa</label>
<input type="input" class="form-control" id="nr_rut_empresa" placeholder="rut">
</div>
<div class="form-group">
<label for="usuario_password2">Descripcion empresa</label>
<input type="text" class="form-control" id="nm_desc_empresa" placeholder="Password">
</div>
<div class="form-group">
<label for="usuario_nm_usuario">Rubro de la empresa</label>
<input type="input" class="form-control" id="nm_rubro" placeholder="Ingrese nombres">
</div>

</div>
</div>
<!-- /.box-body -->

<div class="box-footer">
<button type="submit" class="btn btn-primary">Ingresar</button>
<button type="reset" class="btn btn-default">Cancelar</button>

</div>
</form>
</div>
<!-- /.box -->

</div>
<!-- /.row -->
</section>
</body>
<script>



$(function() {
// Initialize form validation on the registration form.
// It has the name attribute "registration"
alert($("#formIngEmpresa").validate().form());
$("#formIngEmpresa").validate({
// Specify validation rules
rules: {
// The key name on the left side is the name attribute
// of an input field. Validation rules are defined
// on the right side
nm_rs_empresa: "required",
nr_rut_empres: "required",
nm_desc_empresa: "required",
nm_rubro: "required"

},
// Specify validation error messages
messages: {
nm_rs_empresa: "Porfavor introducir nombre empresa",
nr_rut_empres: "Por favor introducir rut",
nm_desc_empresa: "Por favor introducir una Descripcion",
nm_rubro: "Elija el rubro de la empreesa",

},
// Make sure the form is submitted to the destination defined
// in the "action" attribute of the form when valid
submitHandler: function(form) {
form.submit();
}
});
$("#submit").click(function(){
$("#formIngEmpresa").submit();
return false;
});
});
</script>

Answer Source

jQuery Validate plugin doesn't work in CodeIgniter

Right, it doesn't. jQuery is JavaScript and it only works in the browser, while CodeIgniter only works on the server. In other words, your framework does not matter to JavaScript as long as you send the proper HTML markup to the browser.

Here's why you're having difficulties...

  1. You must have a name attribute on every input considered for validation and these names must exactly match the names you used when you declared your rules. Even your code comments say the same thing!

    rules: {
        // The key name on the left side is the name attribute <-- READ HERE!!
        // of an input field. Validation rules are defined
        // on the right side
        nm_rs_empresa: "required", // <- 'nm_rs_empresa' must match the 'name' attribute
        ....
    
  2. The click handler could be bypassing the plugin. Since jQuery Validate automatically captures the click event of the submit button and fully takes care of the submission, you absolutely would not need any additional event handlers. Remove this entire click handler... it's not needed.

    $("#submit").click(function() {     // REMOVE THIS
        $("#formIngEmpresa").submit();  // REMOVE THIS
        return false;                   // REMOVE THIS
    });                                 // REMOVE THIS
    

Working DEMO: jsfiddle.net/wtdhvtc7/

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download