AJAX Validation with Form Submission

Question

How do I validate fields with AJAX jquery form submission? This is the jquery code to submit, and I have a javascript file to validate.

  $("#submit").click(function(e) {
  e.preventDefault();
  var proc = $("#proc").val(); 
  var proc_date = $("#dp3").val();
  var supervisor = $("#name5").val();
  var mrn = $("#username4").val();
  var note = $("#note").val();
  var dataString = 'proc='+proc+'&supervisor='+supervisor+'&mrn='+mrn+'&note='+note;
  $.ajax({
    type:'POST',
    data:dataString,
    url:'procedure_log_result.php',


success:function(data) {
  //alert(data);

  location.reload(true);
    }
  });
});

Here is the javascript file which is located (js/procedure_log/PL_validate.js)

    'use strict';
$(document).ready(function() {
    $('.popup-validation').validationEngine();
    Admire.formValidation();
    $(".error_color").append('<br/>');
    $(".form_val_popup_dp1").datepicker({
        todayHighlight: true,
        format: 'yyyy-mm-dd',
        autoclose: true
    });

The second part to my question is how would I create a custom validation? For example I have a select input that has a disabled option "Select Procedure". However, when I submit without choosing an option it mistakes "select procedure" as a chosen option. Therefore I want to make a custom validation that rejects "select procedure".

Can you take the code from the document.ready method, and place it in a separate function, that can be called from the "submit" method? — dev4life, Dec 03 '19 at 17:47

Kevin Kulla · Answer 1 · 2019-12-03T19:55:12.620

-1

Have you considered using Jquery Validation?

See this answer: https://stackoverflow.com/a/15072147/12113934

You'll want to do your validation and then in the success portion of the validation function you'll include your AJAX function.

EDIT

$("#submit").click(function(e) {
   e.preventDefault();
   $('#myform').validate({ // initialize the plugin
    ignore: ":disabled",
    rules: {
        ".form_val_popup_dp1": {
            required:true
           }
    },
    submitHandler: function(form) {
        var proc = $("#proc").val(); 
        var proc_date = $("#dp3").val();
        var supervisor = $("#name5").val();
        var mrn = $("#username4").val();
        var note = $("#note").val();
        var dataString = 
          'proc='+proc+'&supervisor='+supervisor+'&mrn='+mrn+'&note='+note;
        $.ajax({
          type:'POST',
          data:dataString,
          url:'procedure_log_result.php',
        }
    });
 });

This will ignore all disabled fields and once your code is valid it will fire the submitHandler function.

edited Dec 03 '19 at 19:55

answered Dec 03 '19 at 16:38

Kevin Kulla

39
6

2

This does not provide an answer to the question. Once you have sufficient [reputation](https://stackoverflow.com/help/whats-reputation) you will be able to [comment on any post](https://stackoverflow.com/help/privileges/comment); instead, [provide answers that don't require clarification from the asker](https://meta.stackexchange.com/questions/214173/why-do-i-need-50-reputation-to-comment-what-can-i-do-instead). - [From Review](/review/low-quality-posts/24754500) – nurdyguy Dec 03 '19 at 19:16
@nurdyguy I think this does answer the question. The user is wanting to validate his data before it's submitted. I've linked an answer which outlines exactly how to do that. – Kevin Kulla Dec 03 '19 at 19:26
No, this in not a good answer. This could either be marked as a "link only answer" or as a comment. Or, alternatively, you could mark the question as "already asked" and supply the link you referenced there. A true good answer should include code and an explanation of how/why that code answers the question. – nurdyguy Dec 03 '19 at 19:35

AJAX Validation with Form Submission

1 Answers1