1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

How to make Inline form validation find all errors on Submit

Discussion in 'JavaScript' started by wpprod, Jul 23, 2014.

0
  1. #1
    All of the fields in this form are required.

    1. Inline validation activates for text fields. Is there a way to make make it work for "select" fields?
    2. If a user doesn't enter anything, and submits the form, what code is needed to make all of the error messages appear on the form? Currently, only the first message appears when the form is submitted. Need the Function error message to appear as well.




    <html>

<head>

<style type="text/css">
.inlineErrrorMsg {
    color:red;
    margin: 0px 0px;
    padding-left: 25px;
    background-position: 0px left;
    background: transparent url(../images/downarrow.png) no-repeat center left;}


</style>

</head>
<body>

<script Language="JavaScript" Type="text/javascript">
<!--

function ValidateInLine(theForm)
{

  if (NewProductForm.ProductName.value == "")  {
    document.getElementById("nameError").innerHTML = "Please enter the Name of your Product:";
    document.getElementById("nameError").style.display = "block";
     document.getElementById("nameError").scrollIntoView();
    theForm.ProductName.focus();
    return (false);
    }  else {
        document.getElementById("nameError").style.display = "none";

    }

  if (NewProductForm.ProductName.value.length < 2)  {
    document.getElementById("nameError").innerHTML = "Please enter at least 2 characters for the Name of your Product:";
    document.getElementById("nameError").style.display = "block";
     document.getElementById("nameError").scrollIntoView();
   theForm.ProductName.focus();
    return (false);
    }  else {
        document.getElementById("nameError").style.display = "none";

    }


  if (theForm.Function.selectedIndex < 0)
  {
      var divID =  document.getElementById("FunctionError")
    divID.innerHTML = "Please select at least one Function of your Product:";
    divID.style.display = "block";
    divID.scrollIntoView();
    theForm.Function.focus();
    return (false);
    }  else {
        divID.style.display = "none";


  }
  return (true);
}
//--></script><FORM METHOD="POST" action="newproduct-add.asp" name="NewProductForm" onsubmit="return ValidateInLine()" language="JavaScript">


<div class="inlineErrrorMsg" id="nameError" style="display: none;"></div>
<p align="left" style="margin-left: 20">
<b>
<a name="ProductName"></a>*Name of Product:&nbsp; </b>

&nbsp;
<INPUT onkeypress="return check(event)"name="ProductName" id="prodname" size="64" maxlength="255" onblur="ValidateInLine()"></P>

<div class="inlineErrrorMsg" id="FunctionError" style="display: none;"></div>
<P>
<b>*Function:</b>&nbsp;&nbsp;&nbsp; (To select more than one, hold down Ctrl
key and click.)
<BLOCKQUOTE>
<P>
&nbsp;<select size="8" name="Function" multiple onblur="ValidateInLine()">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
<option value="E">E</option>
<option value="F">F</option>
<option value="G">G</option>

<option>Other</option>

</select> If &quot;Other&quot;, please specify:&nbsp;
<INPUT onkeypress="return check(event)"type="text" name="function_othertext" size="20">
</p></BLOCKQUOTE>


<P style="text-align: center; margin-left: -80px;">
<BR>

<INPUT onkeypress="return check(event)"TYPE=submit VALUE="Next" name="Next">&nbsp;
<INPUT onkeypress="return check(event)"type="reset" value="Cancel" name="Cancel" onClick="cancel()"><p>&nbsp;</p>

</b>



</FORM>
<script>
function resetForm()
{
document.getElementById("NewProductForm").reset();
}
</script>



</body>

</html>
    Code (markup):
     
    wpprod, Jul 23, 2014 IP
  2. HuggyStudios

    HuggyStudios Well-Known Member

    Messages:
    724
    Likes Received:
    20
    Best Answers:
    26
    Trophy Points:
    165
    #2
    Question #1: http://stackoverflow.com/questions/...lected-value-of-dropdownlist-using-javascript

    Question #2:
    If you see in the validation checks you are doing you are returning false which is stopping the form from processing but is also stopping the execution of the JavaScript. What you need to do is set a variable called "error" to false and then when validation fails set that to true. If error is true at the end of the form show the errors.

    Let me know if you need anything else.
     
    HuggyStudios, Jul 25, 2014 IP
  3. wpprod

    wpprod Peon

    Messages:
    15
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #3
    Thanks, again, for your response.

    Question 1: To clarify, I want an error message to appear indicating that the Required select/or checkbox/or radio button is answered (before clicking on Submit). The only way I can think of this working is to somehow automatically set the focus on the first input of the set, so that when the user clicks to the next field, it would trigger the error message indicating the required select/checkbox/radio. What are your thoughts on this?

    Queston2: Will work on this one and let you know.
     
    wpprod, Jul 25, 2014 IP
  4. HuggyStudios

    HuggyStudios Well-Known Member

    Messages:
    724
    Likes Received:
    20
    Best Answers:
    26
    Trophy Points:
    165
    #4
    HuggyStudios, Jul 26, 2014 IP
  5. wpprod

    wpprod Peon

    Messages:
    15
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #5
    Looks like onblur does not work for radio buttons and checkboxes.
     
    wpprod, Jul 28, 2014 IP
  6. HuggyStudios

    HuggyStudios Well-Known Member

    Messages:
    724
    Likes Received:
    20
    Best Answers:
    26
    Trophy Points:
    165
    #6
    HuggyStudios, Jul 29, 2014 IP