I have a little java script snippet that will check to see if someone has entered data into the required fields. You put the following inside the form statement and include the script in the header of the page.

onSubmit=\"return checkrequired(this)\"

This is the req.js script

function checkrequired(which) {
  var pass=true;
  for (i=0;i<which.length;i++) {
    var tempobj=which.elements[i];
    if (tempobj.name.substring(0,8)=="required") {
      if (((tempobj.type=="text"||tempobj.type=="textarea")&&
          tempobj.value=='')||(tempobj.type.toString().charAt(0)=="s"&&
          tempobj.selectedIndex==0)) {
        pass=false;
        break;
      }
    }
  }
  if (!pass) {
    shortFieldName=tempobj.name.substring(8,30).toUpperCase();
    alert("The "+shortFieldName+" field is a required field.");
    return false;
  } else {
  return true;
  }
}

So this works great on regular forms but not at all on ajax forms. I have a page where I have ajax submit some simple preliminary bits to identify a person then it loads a regular form using that info. On the resulting form I have the bit mentioned above in the form statement and the req.js script is included in the header of the original page yet it won't work. Here is the form that is populated by the ajax request (middle bits of the form removed for brevity)

echo "<form onSubmit=\"return checkrequired(this)\" name=\"contract\" enctype=\"multipart/form-data\" action=\"".$_SERVER['PHP_SELF']."?p=u&amp;sid=".$_GET['sid']."\" method=\"post\">";

echo "<br><div class=cont1>".cross_field("showinfo","id","agree","1",$_GET['sid'])."</div>\n";
		echo "<br><div class=cont1><div class=ckbx><input type=\"checkbox\" name=\"requiredAgree\" value=\"y\">I Agree</div>\n";
		echo "<div class=Clear></div>";
		echo "<input type=\"submit\" name=\"submit\" value=\"Submit Contract\" />\n";
		echo "<h4 class=org>After Submitting the Contract you will be taken to the page to upload photos and pay the application fee.</h4>\n</div>\n";
	echo "</form>\n";

The "I Agree" Checkbox is the required field notice the name 'requiredAgree' the required bit is what is supposed to trigger the script to check that this field has been filled in or not and if not it pops up a message "The Agree Field is Required". Only it doesn't work when the form is generated as the result of an ajax request.

I reasoned perhaps the req.js would need to be included at the time the new form was generated and tried to insert it in a comment there, that didn't help.

Any Ideas why not or how to fix this either with other code or to make this code work? I need to be able to require people to enter certain bits of data on this form before going on to submit the form. This code has always worked but I'm not tied to it so any way to force them to enter data before submitting the form is acceptable. Other than that the forms are working beautifully.

    Typically when you submit a form via AJAX, you have a .preventDefault() running on the submit button (since by default the submit button will either reload the page or direct to a different one), which would prevent your checkrequired function from running. I would move that logic inside your button click if you want to submit your form via AJAX.

      Thanks Bonesnap. Not really sure what you mean by putting a .preventDefault() on the submit button. This AJAX stuff is new to me and I'm not real good with Java Script. I can sort of muddle through most of the time but I don't really understand the JavaScript very well. For sure not good enough to write it outright. I can usually modify scripts a bit and incorporate script bits into my php. I did finally find a validate style that seems to work. it does involve processing the form but it validates it and it doesn't reload the entire page just the ajax form part if it doesn't validate if it does it moves on with the next ajax portion. Think this is going to work for me but I would be interested in more info on what you have proposed.

        Calling preventDefault on an event keeps the browser event from firing in the normal way. IIRC, you might do 'onclick="return false;"' for a similar effect (and now that I look more closely at your req.js, it appears to do just that).

        Linkage: https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault

        This is a different tangent ... have your checked in your debugger (Firebug, Chrome Debugger, IE F12 Developer Tools) to see if something in the JS is throwing an error that prevents your script from acting as you expect?

        Typically, when I have some JS working and then change it and it doesn't work anymore, I find that it's throwing errors that prevent the rest of the functionality from working, but not the browser, so things don't happen as I've planned....

          dalescop no no errors it just never encountered the script apparently. The ajax bypassed it. I've figured out how to get the validation working in a way that I actually like better than that script so it pretty much doesn't matter now I just needed to get some validation going to make sure people input the info not just click the button and the whole thing blows up. The script I was using that was the object of the original question here was a very rudimentry one and didn't validate anything other than something being input in the form before the form submitted and refreshed the whole page etc. Without an ajax form it was much faster than sending off the request validating then sending it back to refresh the whole page and tell the person they are an idiot. But since I have been exploring AJAX it made much more sense to do the validation with AJAX which I found a way to do and it works and it is fast etc. I do still have a couple of questions but they are totally different from this thread so I'll post them in a new thread.

          Thanks for the link that explained it. 🙂

          Thanks again for all the help.

            Write a Reply...