Multiple form validation with one function

JavaScript
1

I have been using this simple js function to validate a field in a form is filled in.

<script language="JavaScript">
  <!--
    function SubmitForm()
    {
		  var form = document.formname
    	if (form.client_id.value.length == 0)
        {
    		alert('Please make a selection from the list');
    		form.client_id.focus();
    	}
        else
        {
    		form.submit();
    	}
    }

  //-->
  </script>

Now I have a page with multiple forms and I would like to use the same script to validate depending on which form is submitted. I thought I should be able to do something like this… but know very little javascript…any suggestions?


<script language="JavaScript">
  <!--
    function SubmitForm(x)
    {
		  var form = document.x
    	if (form.client_id.value.length == 0)
        {
    		alert('Please make a selection from the list');
    		form.client_id.focus();
    	}
        else
        {
    		form.submit();
    	}
    }

  //-->
  </script>

Here is the code for the form submission link I am using:

<a href=javascript:SubmitForm(formname) target='_self' onFocus='if(this.blur)this.blur()'> select </a>
2

This is one of the great things about JavaScript. It’s all fun and games until you actually want to do something with it. So let’s think this through.

First the form submission process is all up the wahoo. If people don’t have javascript enabled it will be impossible to submit the form. Client-side scripting should not be relied upon to validate form information, it’s just a useful addition to help make the user experience easier.

What follows is a little digression before we return to answering the question.

Form submission is performed through the form element, with the onsubmit attribute being used to validate the form. If the called script returns true it submits, if it returns false, it doesn’t.

Using a link to submit a form is also another guarantee that the form won’t submit unless you have javascript enabled.

So how this would normally be put together?


<form id="formname" action="..." onsubmit="validate('client_id')">
  <select id="client_id" name="client_id">...</select>
  ...
  <input type="submit" value="Select" />
</form>



function validate(id) {
  var el = document.getElementById(id);
  if (el.value == 0) {
    // do bad stuff
    // ...
    return false;
  }
  // otherwise allow form to be submitted
  return true;
}

Anyway, that’s just a rough background and doesn’t mean that I will be changing your code around. I want to, but I won’t. :slight_smile:

You are wanting to validate multiple form fields, but you’re still using absolute names like formname and client_id in the function.

The easiest answer is to replace those absolute values with ones that are passed in to the function instead.


function SubmitForm(name, id)
{
	var form = document[name]
	if (form[id].value.length == 0)
	{
		alert('Please make a selection from the list');
		form[id].focus();
	}
	else
	{
		form.submit();
	}
}

And let your link provide those values for the different forms.


<a href="javascript:SubmitForm('formname', 'client_id')" target="_self" onFocus="if(this.blur)this.blur()"> select </a>
3

The examples were much appreciated thank you. Using your response worked beautifully, I’m just not familiar with JS enough to know how to pass those values into the script.

Your point on the use of js for validation is well taken. This particular instance I’m using it in I am guaranteed that js is enabled because its all on our intranet and I know who all the clients will be.