How to get rid of form validation redundancies?

In the code below, ProductName and MatName use the same validation script. How can I use variables to to reduce the script to one subfunction?

<script>
<!--

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.MatName.value == "")  {
    document.getElementById("matError").innerHTML = "Please enter the Name of your material:";
    document.getElementById("matError").style.display = "block";
     document.getElementById("matError").scrollIntoView();
    theForm.MatName.focus();
    return (false);
    }  else {
        document.getElementById("matError").style.display = "none";

    }




  return (true);
}
//--></script><FORM METHOD="POST" action="newproduct-add.asp" name="NewProductForm" onsubmit="return ValidateInLine(this)" 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="matError" style="display: none;"></div>
<p align="left" style="margin-left: 20">
<b>
<a name="MatName"></a>*Name of Material:&nbsp; </b>

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


<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):

 

Well you need to completely rewrite the code to be honest as the mark-up is terrible. But to address your question, have a look at this code:

<script>
/*  
    added this as a temp fix as you didn't 
    include this function in yoru code
*/
function check(e) {
    return true;
}

function resetForm() {
    document.getElementById("NewProductForm").reset();
}

function emptyCheck(object, errorText, errorID) {
    var errorObject = document.getElementById(errorID);
    if (object.value == '')  {
        errorObject.innerHTML = errorText;
        errorObject.style.display = 'block';
        errorObject.scrollIntoView();
        //errorObject.focus(); this isn't needed
        return false;
    }
    errorObject.style.display = 'none';
    return true;
}

function ValidateInLine() {
    if(!emptyCheck(NewProductForm.ProductName, 'Please enter the name of your product:', 'nameError') || !emptyCheck(NewProductForm.MatName, 'Please enter the name of your material:', 'matError')) {
        return false;
    }
    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="matError" style="display: none;"></div>
<p align="left" style="margin-left: 20">
<b>
<a name="MatName"></a>*Name of Material:&nbsp; </b>

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


<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>

</script>



</body>

</html>

Code (markup):

 

Edit: Oops, I ran the script you submitted, but the inline error message for matError is not functioning.

Thank you! (I spent a day researching this online with no good examples.) This is exactly what I had in mind.

 

I tested this and it was working fine. Which kind of error are you getting and which browser are you using?

 

I am using Firefox 30.0.

Do this:
1. Bring up form in Firefox browser.
2. Click in ProductName field. The "Please enter the name of your product:" message appears.
3. Click in MatName field. Error message for MatName does not appear.

 

You can use preg_match concept . Follow w3school for syntax ...