SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Zealot
    Join Date
    Aug 2006
    Posts
    142
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Multiple form validation with one function

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

    Code:
    <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?
    Code:
    <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:

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

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,527
    Mentioned
    84 Post(s)
    Tagged
    4 Thread(s)
    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?

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

    Code JavaScript:
    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. :-)


    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.

    Code JavaScript:
    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.

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

  3. #3
    SitePoint Zealot
    Join Date
    Aug 2006
    Posts
    142
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thank you

    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •