Form submission button, I have to check some validation using jquery. However I have also used codeiginiter validation with form_open(xxxx), which makes my submit button jQuery has not been called. How can I do to make both works? before or after? (I want front and backend checking)

<?php $prevURLPATH=urlencode($p); echo form_open('form/'.$usr.'/'.$name.'?prevURL='.$p); ?>


<div class="form-group row">
<label class="col-md-3 control-label text-center"></label>
<div class="col-md-8"> 
<button id="submit-upload-form" class="btn btn-primary btn-tw" onclick="setup(); return false;"><i class="glyphicon glyphicon-upload"></i>Submit</button>
<button id="validate" hidden="true" type="submit"></button>
</div>
</div>


function setup()
{ .......Checking some fields in the form...............}

What I want is: On Form Submission, Jquery/JS checking (Frontend), then backend codeigniter form checking.

(It seems like when user click the submit button, it ignores all the jquery validation and go straight to codeigniter validation. I think if I use form_open() in php I am very limited right?)

I am following this link.

Hoping to find an answer so that other people will know the right way of working with codeiginiter validation.

Thanks for all your answers so far, however I still couldn't find the right solution yet. :( Anyone else please help?

Form submission button, I have to check some validation using jquery. However I have also used codeiginiter validation with form_open(xxxx), which makes my submit button jQuery has not been called. How can I do to make both works? before or after? (I want front and backend checking)

<?php $prevURLPATH=urlencode($p); echo form_open('form/'.$usr.'/'.$name.'?prevURL='.$p); ?>


<div class="form-group row">
<label class="col-md-3 control-label text-center"></label>
<div class="col-md-8"> 
<button id="submit-upload-form" class="btn btn-primary btn-tw" onclick="setup(); return false;"><i class="glyphicon glyphicon-upload"></i>Submit</button>
<button id="validate" hidden="true" type="submit"></button>
</div>
</div>


function setup()
{ .......Checking some fields in the form...............}

What I want is: On Form Submission, Jquery/JS checking (Frontend), then backend codeigniter form checking.

(It seems like when user click the submit button, it ignores all the jquery validation and go straight to codeigniter validation. I think if I use form_open() in php I am very limited right?)

I am following this link.

Hoping to find an answer so that other people will know the right way of working with codeiginiter validation.

Thanks for all your answers so far, however I still couldn't find the right solution yet. :( Anyone else please help?

• javascript
• php
• jquery
• codeigniter
• validation

• add event.preventDefault() in your jquery function – Vinie Commented Apr 4, 2016 at 5:27
• You can bind any function to the click of a button. It doesn't matter if this button is a submit, the binding won't stop the submission from happening. I've tested my answer and it works: it triggers first the jQuery function and then the form validation. – Dacklf Commented Apr 7, 2016 at 10:54

7 Answers 7

If you want to validate in the client before submitting your form, the following will work:

// view
echo form_open('basic_controller/submission');
echo form_input( array('name'=>'text', 'id'=>'text_input') );
echo form_submit('my_submit', 'Enter', "id='my_submit'");
echo form_close();

// controller
function submission() {
    $field = $this->input->post('text');
    // add your checkings (backend)
}

So far, this is what you already had but simpler. Note that fields on the form have an ID. We can now manipulate and access the content of the form easily via jQuery. Add a click handler on the submit button:

    // view
    <script type='text/javascript'>    
        $(document).on('click', '#my_submit', function() {        
            var input_value = $('#text_input').val();

            // do your frontend checkings here
            alert('before form submission. ' + input_value);
        });
    </script>

Actually, there is no need to give the fields an ID, you only have to assign an ID to the submit button and then access the fields in some other way (I just did that for the sake of simplicity).

EDIT

In your case, the script should be:

$(document).on('click', '#submit-upload-form', function() {
    setup();
});

You can stick with jquery.validate plugin. It's convention is similar to html5 methods to validate form. Every modern browser supports this methods, so maybe you can even ommit jquery plugin, and rely on codeigniter validation as the last resort if somebody switched off javascript.

With jquery plugin you have more customization, while html5 validation brings its own messages and styles.

I think there's also a problem with your example, there are no inputs, so what we validate exactly. Giving upload class sugests that there will be file upload happening.

<input type="file" name="pic" id="pic" accept="image/gif, image/jpeg" required/>

Also jquery plugin has method for upload validation.

There can be some issue with your form. Do you close it? And it has misterious action thing. Maybe it should be form_open_multipart() if there are any files, remember that form_open produces POST method form. And what about this url inside action: form/'.$usr.'/'.$name.'?prevURL='.$p . Maybe try to improve controller and routing.

By the way. Working with jquery validate is as easy as putting html5 rules inside inputs and adding script at the bottom.

<script>
$("#your_form").validate();
</script>

And the last thing. If you use jquery plugin, remember to load jquery before loading plugin :)

here is example try with that one..hope worked for you..

<?php
$attributes = array('class' => 'email', 'id' => 'myform');
$prevURLPATH=urlencode($p); echo form_open('form/'.$usr.'/'.$name.'?prevURL='.$p,$attributes); ?>
<div class="form-group row">
<label class="col-md-3 control-label text-center"></label>
<div class="col-md-8"> 
<button id="submit-upload-form" class="btn btn-primary btn-tw" type="submit"><i class="glyphicon glyphicon-upload"></i>Submit</button>
</div>
</div>
<script>
$(document).ready(function(){
    $('#myform').submit(function() {
         alert('hi');
        //write your validation code here. and make sure about jquery library is loaded.
        return false;
    });
}};
</script>

For that there's a plugins written and maintained by Jörn Zaefferer, a member of the jQuery team, lead developer on the jQuery UI team and maintainer of QUnit. It was started back in the early days of jQuery in 2006, and updated and improved since then.

Bundled with a lot of examples you can play with

Put something like this in your header,

<script src="<?php echo YOUT_PATH.'jquery-1.12.2.js'; ?>"></script>
<script src="<?php echo YOUR_PATH.'bootstrap.min.js'; ?>"></script>
<script src="<?php echo YOUT_PATH.'jquery-validation-1.15.0/dist/jquery.validate.js'; ?>"></script>

In your form, will be similar to this

<?php echo form_open('form/'.$usr.'/'.$name.'?prevURL='.urlencode($p), array('class'=>'form-horizontal','class'=>'signupForm')); ?>
<div class="form-group">
  <div class="col-sm-9 col-sm-offset-4">
    <label class="col-md-3 control-label text-center"></label>
    <button type="submit" class="btn btn-primary btn-tw" name="signup" ><i class="glyphicon glyphicon-upload"></i>Submit</button>
  </div>
</div>
<?php form_close(); ?>

and in your footer put similar to this.

<script type="text/javascript">
$( "#signupForm" ).validate( {
  rules: {
    // Rules Here
  },
  messages: {
    // Messages here
  },
  errorElement: "em",
  errorPlacement: function ( error, element ) {
    // Add the `help-block` class to the error element
    error.addClass( "help-block" );

    if ( element.prop( "type" ) === "checkbox" ) {
      error.insertAfter( element.parent( "label" ) );
    } else {
      error.insertAfter( element );
    }
  },
  highlight: function ( element, errorClass, validClass ) {
    $( element ).parents( ".col-sm-5" ).addClass( "has-error" ).removeClass( "has-success" );
  },
  unhighlight: function (element, errorClass, validClass) {
    $( element ).parents( ".col-sm-5" ).addClass( "has-success" ).removeClass( "has-error" );
  }
});
</script>

You can read how it will be properly use in this link, http://jqueryvalidation/

i had the same problem with following code.

<form id="formId" action="path">HTML</form>
<script>
$("#formId").submit(function(){
  //validation
  return false;
});
<script>

but when i swap the id and action it simply worked.

<form  action="path" id="formId"></form>

You need to close the form before your script and this will work. Try following code-

<?php $prevURLPATH=urlencode($p); echo form_open('form/'.$usr.'/'.$name.'?prevURL='.$p); ?>


<div class="form-group row">
<label class="col-md-3 control-label text-center"></label>
<div class="col-md-8"> 
<button id="submit-upload-form" class="btn btn-primary btn-tw" onclick="setup(); return false;"><i class="glyphicon glyphicon-upload"></i>Submit</button>
<button id="validate" hidden="true" type="submit"></button>
</div>
</div>
</form>

<script>
function setup()
{ .......Checking some fields in the form...............}
</script>

You can remove your submit button and you put a validation function on a button like you did for

<button id="submit-upload-form" class="btn btn-primary btn-tw" onclick="setup(); return false;"><i class="glyphicon glyphicon-upload"></i>Submit</button>

And your setup function checks like this :

function setup(){
  //do your verification stuff
  if (valid){
    $("#yourFormId").submit();
  }

}