JavaScript Validation - Aborting a ColdFusion action page load

Question

I have a CF page, main.cfm, for searching records based a various input fields. The search form's action page points back to itself (main.cfm).

<form id="frm_srch" action="main.cfm" method="post" onSubmit="return validate_search_form()">

   <input id="order_date" name="OrderDate_srch" type="text"/>

I wired up the JS function validate_search_form() to onSubmit, and everything works ok except for the actual aborting of the page load.

function validate_search_form() {               
  var order_date = $("input[name='OrderDate_srch']").val();     

  var d = new Date(order_date);

  if( d == 'Invalid Date' && order_date != "" ) {
    alert("Invalid order date");
    returnToPreviousPage();
    //window.history.back();
    //event.returnValue = false;
    return(false);
  }

  alert("validations passed");
  //event.returnValue = true;
  return(true);     
}

I also tried creating an event handler to simply always prevent the page load, like so

$('#frm_srch').submit(function (evt) {
  evt.preventDefault();
  window.history.back();
});

and everything else suggested in this post javascript to stop form submission

Is there anyway to make this happen from a CF page using a regular form? Using cfform/cfinput doesn't work in my case b/c I cannot get the date field to toggle as disabled/enabled correctly (it's associated to a checkbox, and this behavior is for another post)? Thanks.

So you get the 'invalid order date' alert but the form still submits? Are you getting any JS errors appearing in your browser's console? — John Whish, Jan 05 '16 at 17:03
@JohnWhish Yes, still submits after dismissing the invalid date message. I haven't opened the debugger b/c my boss is on me about finishing, regardless of solution used, and I didn't want to start down that hole. I will when I can. — samus, Jan 05 '16 at 17:04
I suggest a completely different approach. Instead of using js to take action after the form is submitted, use it to prevent the form from being submitted if something is not right. Not making the submit button available is one way to do that. — Dan Bracuk, Jan 05 '16 at 17:07
sounds like you have an error in `returnToPreviousPage` then. The developer tools in your browser are pretty much essential when doing any JS work. I strongly recommend you use them :) — John Whish, Jan 05 '16 at 17:09
For now, I'm using isValid on the server side, after the submit, in my search query, and ignoring invalid dates like so ` AND [OrderDate] = ` — samus, Jan 05 '16 at 17:10
Be careful with `isValid(date)`. CF is pretty generous when it comes to converting string to dates. For example, try this. `dateString = "April 32"; writedump("valid ? #isValid('date', dateString)# and #parsedatetime(dateString)#");` — Dan Bracuk, Jan 05 '16 at 18:22
In your server side validation, change `dateformat` to `parsedatetime()` in the value attribute of your `cfqueryparam` tag. — Dan Bracuk, Jan 05 '16 at 18:24

score 2 · Answer 1 · edited Jan 05 '16 at 22:32

This is part of your existing function:

if( d == 'Invalid Date' && order_date != "" ) {
    alert("Invalid order date");
    returnToPreviousPage();
    return(false);
}

alert("validations passed");
return(true);

Here is a simpler version of js form validation:

 if (something is wrong) {
     display something;
     return false;
 }
 else
     return true;

The first difference is the call to function returnToPreviousPage(); If the problem is on the current page, this function call may not be serving any useful purpose. In fact, it might be messing you up.

The next difference is that your function does not have the keyword else after the if block. While it won't matter if the return false command in your if block executes, it doesn't do any harm and prevents the value from being returned inadvertently.

I thought I tried only returning false on invalidation, then adding `returnToPreviousPage()` when that didn't work, but I can verify. The implicit `else` is a preference style I cultivated in **c/c++/c#/java**. It's similar to early "error trapping" with `if`'s at the top of a function, which allows the majority of the body to be less indented. — samus, Jan 05 '16 at 19:38

JavaScript Validation - Aborting a ColdFusion action page load

1 Answers1