Eckstein Eckstein - 3 months ago 9
jQuery Question

jquery failing when element doesn't exist

I am using the following script to customize some jquery validation on some forms. This script is called once and is used by a template file to generate one of a few different forms, meaning the script is called for all forms.

The top part (//Make sure there is a title) works fine on all forms if it's used alone, because all form have that title element, but the two other validations (expiration and start/end date) only apply to one of the forms, otherwise those fields don't exist.

I'm getting the error "(index):1966 Uncaught TypeError: Cannot read property 'replace' of undefined" when trying to submit a form that does not have these elements, even though I added conditionals to check for those elements first. Also, the validation jquery is failing to show when this happens.

What am I doing wrong?

jQuery( document ).ready(function($){
//Make the title required
acf.add_filter('validation_complete', function( json, $form ){
//Make sure there is a title
if( !$("#_post_title").val() ) {

var temp = new Object();
temp["input"] = "_post_title";
temp["message"] = "A Title is required";
json.errors.push(temp);
}


//Make sure the expiration is 3 months or less away (auditions)
if ($("#acf-field_574257a8eb3f0")!== null) {
var expRaw = $("input#acf-field_574257a8eb3f0").val();
var expDate = expRaw.replace(/(\d{4})(\d{2})(\d{2})/, '$1-$2-$3')
var expiration = Date.parse(expDate);
var max = (3).months().fromNow();
if (expiration > max) {
var temp = new Object();
temp["input"] = "acf[field_574257a8eb3f0]";
temp["message"] = "Maximum of 3 months from today!";
json.errors.push(temp);
}
}

//Make sure start date is before end date and that start date is in the future
if ($("#acf-field_5701b4d1d11d0") !== null) {
var startRaw = $("input#acf-field_5701b4d1d11d0").val();
var endRaw = $("input#acf-field_5701b4ecd11d1").val();
var startDate = startRaw.replace(/(\d{4})(\d{2})(\d{2})/, '$1-$2-$3')
var endDate = endRaw.replace(/(\d{4})(\d{2})(\d{2})/, '$1-$2-$3')
var start = Date.parse(startDate);
var end = Date.parse(endDate);
if (start < Date.parse("now")) {
var temp = new Object();
temp["input"] = "acf[field_5701b4d1d11d0]";//start date
temp["message"] = "Start date must be in the future.";
json.errors.push(temp);
} else if (start > end){
var temp = new Object();
temp["input"] = "acf[field_5701b4ecd11d1]";//end date
temp["message"] = "End date must be after start date.";
json.errors.push(temp);
}
}


// return
return json;
});
});

Answer

Try test the length - if it returns 0, then it does not pass the if statement:

jQuery(document).ready(function($) {
  //Make the title required
  acf.add_filter('validation_complete', function(json, $form) {
    //Make sure there is a title
    if (!$("#_post_title").length) {

      var temp = new Object();
      temp["input"] = "_post_title";
      temp["message"] = "A Title is required";
      json.errors.push(temp);
    }


    //Make sure the expiration is 3 months or less away (auditions)
    if ($("#acf-field_574257a8eb3f0").length) {
      var expRaw = $("input#acf-field_574257a8eb3f0").val();
      var expDate = expRaw.replace(/(\d{4})(\d{2})(\d{2})/, '$1-$2-$3')
      var expiration = Date.parse(expDate);
      var max = (3).months().fromNow();
      if (expiration > max) {
        var temp = new Object();
        temp["input"] = "acf[field_574257a8eb3f0]";
        temp["message"] = "Maximum of 3 months from today!";
        json.errors.push(temp);
      }
    }

    //Make sure start date is before end date and that start date is in the future
    if ($("#acf-field_5701b4d1d11d0").length) {
      var startRaw = $("input#acf-field_5701b4d1d11d0").val();
      var endRaw = $("input#acf-field_5701b4ecd11d1").val();
      var startDate = startRaw.replace(/(\d{4})(\d{2})(\d{2})/, '$1-$2-$3')
      var endDate = endRaw.replace(/(\d{4})(\d{2})(\d{2})/, '$1-$2-$3')
      var start = Date.parse(startDate);
      var end = Date.parse(endDate);
      if (start < Date.parse("now")) {
        var temp = new Object();
        temp["input"] = "acf[field_5701b4d1d11d0]"; //start date
        temp["message"] = "Start date must be in the future.";
        json.errors.push(temp);
      } else if (start > end) {
        var temp = new Object();
        temp["input"] = "acf[field_5701b4ecd11d1]"; //end date
        temp["message"] = "End date must be after start date.";
        json.errors.push(temp);
      }
    }


    // return
    return json;
  });
});