Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

How do I validate form values without even submitting?

Posted on 2006-11-08
6
Medium Priority
?
152 Views
Last Modified: 2008-03-17
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
0
Comment
Question by:bemara57
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
6 Comments
 
LVL 54

Accepted Solution

by:
b0lsc0tt earned 1000 total points
ID: 17902935
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
 
LVL 6

Expert Comment

by:aescnt
ID: 17903821
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
 
LVL 54

Expert Comment

by:b0lsc0tt
ID: 17903864
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
 
LVL 6

Assisted Solution

by:sodalitas
sodalitas earned 1000 total points
ID: 17906703
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

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
A while back, I ran into a situation where I was trying to use the calculated columns feature in SharePoint 2013 to do some simple math using values in two lists. Between certain data types not being accessible, and also with trying to make a one to…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

596 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question