How do I validate form values without even submitting?

I'm trying to create checkpoints in my form. So when they click an image in the middle of the form, a new input will be visible. How do I make an onclick event on that image to validate a current selected option on the form, without submitting the form at all? Thanks for the help
bemara57Asked:
Who is Participating?
 
b0lsc0ttConnect With a Mentor IT ManagerCommented:
bemara57,

Your details are a little vague but you can probably do what you want just using a function that the onclick event will fire.  I will assume that the option that needs validating isn't the one clicked.  Make sure the option to be validated has an id attribute assigned.  I will assume it is option1 for my sample.

function validate() {
  if (document.getElementById("option1").value != "rightvalue") {
    alert("Please enter the right value!");
  }
  return false;
}

This should at least get you started or give you a basic idea.  Please provide details like code, etc if you want something more specific.  Let me know if you have any questions or need more information.

b0lsc0tt
0
 
aescntCommented:
I think the best way to put this validate() function is on the form's onsubmit.

<form onsubmit="validate()"> ... </form>

And have the validate() function return the right values. Returning 'false' should stop the submitting process, and 'true' will make it continue.
(Modifying b0lsc0tt's code here)

function validate() {
  if (document.getElementById("option1").value != "") {
    alert("Please enter something for option1."); return false;
  }
  // put more if checks here if necessary.
  return true;
}

Go to your favorite search angine and search for Javascript Form Validation, there should be many more resources available for you.
0
 
b0lsc0ttIT ManagerCommented:
Actually if you need help with that type of validation I can help with that too.  Experts on this site are a great resource.  However since you said that you wanted to validate WITHOUT submitting then I didn't mention the onsubmit event or other options.  Let me know if I misunderstood.

bol
0
 
sodalitasConnect With a Mentor Commented:
If you have sections of your page, and you want to be able to validate the various sections without submitting, you could add a function for each section such as

function validateSection1() {
   //validate the first x controls here
}

funciton validateSection2() {
  //validate the second y controls here
}

function validateSection3() {
  //validate the rest of the controls here
}

function validateAll() {
  validateSection1();
  validateSection2();
  validateSection3();
}

Then you can have a checkpoint control/image/etc. after each section, where they would be of the format

<input type="Button" id="Checkpoint1" onclick="javascript:validateSection1();" value="Validate" />

And the form's submit would validate all

<form id="myForm" action="urlofnextpage" method="POST" onsubmit="javascript:validateAll();">

0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.