jquery form validation is not working in codeigniter

** scripting link in top of the page

i done scripting in the same page

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.14.0/jquery.validate.js"></script>

my form code

<form role="form" method="post" name="step1" id="step1" action="<?php echo site_url('Home/client_sign_up'); ?>">
   <div class="form-group col-md-4">
      <label for="name" class="sr-only">Name:</label>
      <input type="text" name="fname" class="form-control" id="fname" placeholder="First Name" required="required">
   </div>       
   <div class="form-group col-md-12">
       <input type="submit" name="client_submit" class="btn btn-primary" value="Register">
   </div>                                            
</form>

this code is not working

Scripting code this is scripting code

<script type="text/javascript">    
(function($,W,D)
{
    var JQUERY4U = {};    
    JQUERY4U.UTIL =
    {
        setupFormValidation: function()
        {
            //form validation rules
            $("#step1").validate({
                rules: {
                    fname: "required",                 
                },
                messages: {
                    fname: "Please enter your firstname",                           
                },
                submitHandler: function(form) {
                    form.submit();
                }
            });
        }
    }    
    //when the dom has loaded setup form validation rules
    $(D).ready(function($) {
        JQUERY4U.UTIL.setupFormValidation();
    });    
})(jQuery, window, document);    
</script>

please help me thanks in advance

1 answer

  • answered 2017-01-11 14:18 Brad

    This is all I do. I havent looked at the latest version of validator , so this may not be up to date.

    $(function () {
    'use strict';
    jQuery.validator.setDefaults({
      debug: true,
      success: "valid"
    });
    $("#step1").validate({
        rules:{
            man: {
                required: true,
                minlength: 5
            },
            woman: {
                required: true,
                minlength: 3
            },
            year: {
                required: true,
                digit: true,
                maxlength: 4,
                minlength: 4
            },
            state: {
                required: true,
                maxlength: 15
            },
            kids: {
                required: true,
                digit: true,
                maxlength: 2,
                minlength: 1
            },
            family: {
                required: true
            },
            relation: {
                required: true
            },
            family2: {
                required: true
            },
            male: {
                required: true
            }
        },
        messages: {
            man: {
                required: "Field Required",
                minlength: "5 of them please"
            },
            woman: {
                required: "Field Required",
                minlength: "5 of them please"
            },
            year: {
                required: "Field required",
                digit: "Digits only"
            },
            state: {
                required: "Field required",
                maxlength: "Answer too long"
            },
            kids: {
                required: "Field required",
                digit: "Gotta be numbers",
                maxlength: "Post too long"
            },
            family: {
                required: "This field required"
            },
            relation: {
                required: "This field required"
            },
            family2: {
                required: "This field required"
            },
            male: {
                required: "This field required"
            }
        }
      });
     });
    

    The form looks like this. Its rather long

    <?php $attr1 = array(
        'id' => "ajax",
        'class' => 'pure-form pure-form-aligned'
    );?>
                    <?php echo form_open('/forms/form1', $attr1) ;?>
                    <div class="pure-control-group">
                    <label for="family">Family</label>
                    <?php
                        $attr2 = array(
                            '' => 'Pick one',
                            'Family' => 'family2',
                            'Family' => 'family1'
                        );
                    echo form_dropdown("family", $attr2);?>
                </div>
                <div class="pure-control-group">
                    <label for="male">Male</label>
                    <?php
                    $attr4 = array(
                        'name'      => 'male',
                        'maxlength' => '100',
                        'style'     => 'width:50%'
                    );?>
                    <?php echo form_input($attr4);?>
                </div>
                <div class="pure-control-group">
                    <label for="female">FeMale</label>
                    <?php
                    $attr5 = array (
                        'name'      => 'female',
                        'maxlength' => '100',
                        'style'     => 'width:50%'
                    );?>
                    <?php echo form_input($attr5);?>
                </div>
                <div class="pure-control-group">
                    <label for="branch2">2nd Branch</label>
                    <?php
                    $attr10 = array (
                        'name'        => 'branch2',
                        'maxlength'   => '100',
                        'style'       => 'width:50%',
                        'placeholder' => "Other family branch start"
                    );?>
                    <?php echo form_input($attr10);?>
                </div>
                <div class="pure-control-group">
                    <label for="relationship">Relationship</label>
                    <?php
                    $attr6 = array(
                        'name'      => 'relationship',
                        'maxlength' => '100',
                        'style'     => 'width:50%'
                    );?>
                    <?php echo form_input($attr6);?> <span>8th Great Grandfather</span>
                </div>
                <div class="pure-control-group">
                    <label for="relative">Relative From Ancestry</label>
                    <?php
                    $attr7 = array (
                        'name'        => 'relative',
                        'maxlength'   => '100',
                        'placeholder' => "Ancestry Relative",
                        'style'       => 'width:50%'
                    );?>
                    <?php echo form_input($attr7);?>
                </div>
                <div class="pure-control-group">
                    <label for="level">Cousin Level</label>
                    <?php
                    $attr8 = array (
                        'name'      => 'level',
                        'maxlength' => '2',
                        'type'      => 'number'
                    );?>
                    <?php echo form_input($attr8);?> <span><u>3</u>rd cousin</span>
                </div>
                <div class="pure-control-group">
                    <label for="Year">Year Born</label>
                    <?php
                    $attr9 = [
                        'name'      => 'year',
                        'maxlength' => '4',
                        'type'      => 'number'
                    ];?>
                    <?php echo form_input($attr9);?>
                </div>
                <div class="pure-control-group">
                    <label for="country">Country of Birth</label>
                    <?php
                    $attr11 = [
                        'name'      => 'country',
                        'maxlength' => '100',
                        'type'      => 'text',
                        'id' => 'country'
                    ];?>
                    <?php echo form_input($attr11);?>
                </div>
                <div class="pure-control-group">
                    <label for="comment">Comment</label>
                    <br>
                    <?php
                    $attr12 = [
                        'name' => 'comment',
                        'id'   => 'comment'
                    ];?>
                    <?php echo form_textarea($attr12);?>
                    </div>
                <div class="pure-controls"> 
                <?php echo form_submit('submit', 'Submit');
                echo form_reset('reset', 'Reset');
                echo form_close();?>
    

    The controller

    public function form1() //insert family ancestry
    {
        $data = array (
            'family'        => htmlspecialchars(trim($this->input->post('family'))),
            'male'          => htmlspecialchars(trim($this->input->post('male'))),
            'female'        => htmlspecialchars(trim($this->input->post('female'))),
            'relationship' =>  htmlspecialchars(trim($this->input->post('relationship'))),
            'relative'      => htmlspecialchars(trim($this->input->post('relative'))),
            'level'         => htmlspecialchars(trim($this->input->post('level'))),
            'year'          => htmlspecialchars(trim($this->input->post('year'))),
            'branch2'       => htmlspecialchars(trim($this->input->post('branch2'))),
            'country'       => htmlspecialchars(trim($this->input->post('country'))),
            'comment'       => htmlspecialchars(trim($this->input->post('comment')))
    
        );
        $this->form_validation->set_rules('family', 'Family', 'required|alpha|max_length[9]');
        $this->form_validation->set_rules('male', 'Male', 'required');
        $this->form_validation->set_rules('female', 'Female', 'required');
        $this->form_validation->set_rules('relationship', 'Relationship', 'required');
        $this->form_validation->set_rules('relative', 'Relative', 'required');
        $this->form_validation->set_rules('level', 'Level', 'required|numeric');
        $this->form_validation->set_rules('year', 'Year', 'required|numeric');
        $this->form_validation->set_rules('branch2', 'Branch 2', 'required');
        $this->form_validation->set_rules('country', 'Country', 'required|max_length[20]');
        $this->form_validation->set_rules('comment', 'Comment', 'trim');
        if( $this->form_validation->run() == FALSE) {
            echo validation_errors();
        }else
        {
            $this->db->insert('primary', $data);
            echo "All is well.";
        }
    }