How to validate form using jquery validation on submit?

Question

I am trying to validate my form using jQuery validation js but the problem is I'm not receiving any error message in the toastr.

I followed this link for implementing the error in toastr. The error I am getting is 'This field is required' below the text box. Below is my code for the same:

HTML

<form class="card-body">
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationDefault01">First name</label>
      <input type="text" class="form-control" id="validationDefault01" name="firstName">
    </div>
    <div class="col-md-6 mb-3">
      <label for="validationDefault02">Last name</label>
      <input type="text" class="form-control" id="validationDefault02" name="lastName">
    </div>
  </div>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationDefault03">City</label>
      <input type="text" class="form-control" id="validationDefault03" name="city">
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationDefault04">State</label>
      <select class="custom-select" id="validationDefault04" name="state">
        <option selected disabled value="">Choose...</option>
        <option>...</option>
      </select>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationDefault05">Zip</label>
      <input type="text" class="form-control" id="validationDefault05" name="zip">
    </div>
  </div>
  <div class="row">
    <div class="col-md-3 mb-3">
      <label for="username">Username</label>
      <input type="text" class="form-control" id="username" name="username">
    </div>
    <div class="col-md-3 mb-3">
      <label for="password">Password</label>
      <input type="text" class="form-control" id="password" name="password">
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" id="invalidCheck2" name="confirm">
      <label class="form-check-label" for="invalidCheck2">
        Agree to terms and conditions
      </label>
    </div>
  </div>
  <button class="btn btn-success" type="submit" id="submitBtn">Submit</button>
  <button class="btn btn-danger" type="reset">Reset</button>
</form>

JS

function toasterOptions() {
    toastr.options = {
        "closeButton": false,
        "debug": false,
        "newestOnTop": false,
        "progressBar": true,
        "positionClass": "toast-top-right",
        "preventDuplicates": true,
        "onclick": null,
        "showDuration": "100",
        "hideDuration": "1000",
        "timeOut": "5000",
        "extendedTimeOut": "1000",
        "showEasing": "swing",
        "hideEasing": "linear",
        "showMethod": "show",
        "hideMethod": "hide"
    };
};



$(document).ready(function () {
    toasterOptions();
    $('form').submit(function(e) { 
        e.preventDefault();
        $(this).validate({
            rules: {
                firstName: 'required',
                lastName: 'required'
            },
            messages: {
                firstName: () => {
                    toastr.error('First Name required')
                },
                lastName: () => {
                    toastr.error('Last Name required')
                }
            }
        });
        var values = $(this).serializeArray();
        var xyz = {};
        $.each(values, function (i, obj) { 
            xyz[obj.name] = obj.value
        });
        window.localStorage.setItem('data', JSON.stringify(xyz));
        toastr['info']('Done');
    });
});

Is there anything am missing out ?

score 1 · Answer 1 · answered Nov 08 '20 at 06:51

1

Dude just put Required attribute inside the input elements that should do it for you , the from will not submit until those required properties are filled.

<input type="text" required class="form-control" id="validationDefault02" name="lastName">

answered Nov 08 '20 at 06:51

Hamza javed

59
4

well you answer is also correct but actually i needed custom validation – Avishek Nov 08 '20 at 07:34
`required` is just one rule, and it works only IF he initializes the plugin properly. – Sparky Nov 12 '20 at 02:06

Bourbia Brahim · Accepted Answer · 2020-11-13T21:33:45.017

First problem is , you should declare your validation, outside submit function ( declare validation only once )

Second you have to use message validation for each condition as function that returns your toaster message like :

 "firstName": {
      required: function() {
           toastr.error('First Name required')
      },
  },

also it's recommended to use an ID for your form , and set the submit by the button click , and check if form is valid using jquery validate valid() function

See below working snippet :

function toasterOptions() {
    toastr.options = {
        "closeButton": false,
        "debug": false,
        "newestOnTop": false,
        "progressBar": true,
        "positionClass": "toast-top-right",
        "preventDuplicates": true,
        "onclick": null,
        "showDuration": "100",
        "hideDuration": "1000",
        "timeOut": "5000",
        "extendedTimeOut": "1000",
        "showEasing": "swing",
        "hideEasing": "linear",
        "showMethod": "show",
        "hideMethod": "hide"
    };
};



$(document).ready(function () {
    toasterOptions();
    var form = $("#my-form");
    form.validate({
        onfocusout: false,
        rules: {
            "firstName": {
              required: true,
            },
            "lastName": {
              required: true,
            }
        },
        messages: {
            "firstName": {
              required: function() {
                  toastr.error('First Name required')
              },
            },
            "lastName": {
                required: function() {
                    toastr.error('Last Name required')
                },
            },
        },
        
        submitHandler: function(form {
          var values = $(form).serializeArray();
           console.log(values);
          var xyz = {};
          $.each(values, function (i, obj) { 
              xyz[obj.name] = obj.value
          });
          //window.localStorage.setItem('data', JSON.stringify(xyz));
          toastr['info']('Done');

        }
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js" integrity="sha512-VEd+nq25CkR676O+pLBnDW09R7VQX9Mdiij052gVCp5yVH3jGtH70Ho/UUv4mJDsEdTvqRCFZg0NKGiojGnUCw==" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.css" integrity="sha512-3pIirOrwegjM6erE5gPSwkUzO+3cTjpnV9lexlNZqvupR64iZBnOOTiiLPb9M36zpMScbmUNIcHUqKD47M719g==" crossorigin="anonymous" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.2/jquery.validate.min.js" integrity="sha512-UdIMMlVx0HEynClOIFSyOrPggomfhBKJE28LKl8yR3ghkgugPnG6iLfRfHwushZl1MOPSY6TsuBDGPK2X4zYKg==" crossorigin="anonymous"></script>

<form id="my-form" class="card-body">
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationDefault01">First name</label>
      <input type="text" class="form-control" id="validationDefault01" name="firstName">
    </div>
    <div class="col-md-6 mb-3">
      <label for="validationDefault02">Last name</label>
      <input type="text" class="form-control" id="validationDefault02" name="lastName">
    </div>
  </div>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationDefault03">City</label>
      <input type="text" class="form-control" id="validationDefault03" name="city">
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationDefault04">State</label>
      <select class="custom-select" id="validationDefault04" name="state">
        <option selected disabled value="">Choose...</option>
        <option>...</option>
      </select>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationDefault05">Zip</label>
      <input type="text" class="form-control" id="validationDefault05" name="zip">
    </div>
  </div>
  <div class="row">
    <div class="col-md-3 mb-3">
      <label for="username">Username</label>
      <input type="text" class="form-control" id="username" name="username">
    </div>
    <div class="col-md-3 mb-3">
      <label for="password">Password</label>
      <input type="text" class="form-control" id="password" name="password">
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" id="invalidCheck2" name="confirm">
      <label class="form-check-label" for="invalidCheck2">
        Agree to terms and conditions
      </label>
    </div>
  </div>
  <button class="btn btn-success"  id="submitBtn" type="submit">Submit</button>
  <button class="btn btn-danger" type="reset">Reset</button>
</form>

jQuery Validate plugin includes a `submitHandler` callback function and already is capturing this event. There is no need to create a `click` handler for a `button` in this case. As long as `button` is `type="submit"`, everything from `click` handler can simply go inside the plugin's `submitHandler`. — Sparky, Nov 12 '20 at 20:58
@Sparky , Alright , I've missed that , answer changed using submitHandler . Avishek could you use updated answer using built-in jqvalidate function for form submit — Bourbia Brahim, Nov 13 '20 at 09:14
There is no point putting `event.preventDefault()` inside the `submitHandler` since the plugin is already doing that; and there is no relevant `event` argument available inside this function. — Sparky, Nov 13 '20 at 21:11

How to validate form using jquery validation on submit?

2 Answers2