On Form Submission, do jquery checking first before Codeiginiter validation

Question

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?

Answer 1

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();
});

Answer 2

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 :)