i want to validate my form.I have a form validation javascript code in my code igniter view but it is not working and still sending values to next page without any validation.Could you tell me where I am making mistake and why this is happening?

Code:

<form method="get" action="/calculator/stage_two" name="calculate" id="calculate" onsubmit="return validateForm();">
    <div class="calc_instruction">
        <input type="text" name="property_number" placeholder="No/Name" id = "property_number" class="stage_one_box" />
        <input type="text"  name="postcode" placeholder="Postcode" id = "postcode" class="stage_one_box" />
    </div>
    <input type = "image" name = "submit_calculator" id = "submit_calculator" value="Go" src = "/images/next_button.png" />
</form>

Javascript function:

<script type="text/javascript">
    function validateForm() {
        var postcode=document.forms["calculate"]["postcode"].value;
        if (postcode==null || postcode=="") {
            alert("Please enter the postcode to give you more accurate results");
            document.forms["calculate"]["postcode"].focus();
            return false;
        }
</script>

i want to validate my form.I have a form validation javascript code in my code igniter view but it is not working and still sending values to next page without any validation.Could you tell me where I am making mistake and why this is happening?

Code:

<form method="get" action="/calculator/stage_two" name="calculate" id="calculate" onsubmit="return validateForm();">
    <div class="calc_instruction">
        <input type="text" name="property_number" placeholder="No/Name" id = "property_number" class="stage_one_box" />
        <input type="text"  name="postcode" placeholder="Postcode" id = "postcode" class="stage_one_box" />
    </div>
    <input type = "image" name = "submit_calculator" id = "submit_calculator" value="Go" src = "/images/next_button.png" />
</form>

Javascript function:

<script type="text/javascript">
    function validateForm() {
        var postcode=document.forms["calculate"]["postcode"].value;
        if (postcode==null || postcode=="") {
            alert("Please enter the postcode to give you more accurate results");
            document.forms["calculate"]["postcode"].focus();
            return false;
        }
</script>

• php
• javascript
• html
• codeigniter

• are you getting that alerts? – arjuncc Commented Dec 19, 2012 at 9:29
• It's SO important to keep your structure clean! Then typos like a missing bracket wont happen that often again.. – James Cazzetta Commented Dec 19, 2012 at 9:37
• If you are using mozilla, Press (ctrl+shift+j) after the error occures. this will help you in debugging. – Shurmajee Commented Dec 19, 2012 at 9:40
• Cheers guys.Sorted.I was missing bracket and wasnt using getElementById.Thanks. – Bilal Khalid Commented Dec 19, 2012 at 9:40

7 Answers 7

You are missing an end bracket. Any error in the validation code will return a non-false value and allow the submission

Here is a canonical way using forms access:

<form method="get" action="/calculator/stage_two" name="calculate" 
  id="calculate"  onsubmit="return validateForm(this);">
  <div class="calc_instruction">
    <input type="text" name="property_number" placeholder="No/Name" id = "property_number" class="stage_one_box" />
    <input type="text"  name="postcode" placeholder="Postcode" 
      id = "postcode" class="stage_one_box" />
  </div>

    <input type = "image" name = "submit_calculator" id="submit_calculator" src="/images/next_button.png" />
</form>


<script type="text/javascript">
function validateForm(theForm) {
  var postcode=theForm.postcode;

  if (postcode.value=="")  { // cannot be null or undefined if value="" on field
    alert("Please enter the postcode to give you more accurate results");
    postcode.focus();
    return false;
  }
  return true; // allow submit
}
</script>

It seems like you are missing the closing braces "}" at the end of the function.

<script type="text/javascript">
function validateForm() {

    var postcode=document.forms["calculate"]["postcode"].value;
    if (postcode==null || postcode=="")
    {
        alert("Please enter the postcode to give you more accurate results");
        document.forms["calculate"]["postcode"].focus();
         return false;
    }
} // <-- here 
</script>

Please Add end braces for function

<script type="text/javascript">
function validateForm()
 {
  var postcode=document.forms["calculate"]["postcode"].value;
  if (postcode==null || postcode=="")
  {
   alert("Please enter the postcode to give you more accurate results");
   document.forms["calculate"]["postcode"].focus();
    return false;
  }
 }
 </script>

in your javascript function closing brace is missing

Please use this

in your javascript closing brace is missing

<script type="text/javascript">
 function validateForm()
 {

   var postcode=document.forms["calculate"]["postcode"].value;
   if (postcode==null || postcode=="")
    {
    alert("Please enter the postcode to give you more accurate results");
    document.forms["calculate"]["postcode"].focus();
     return false;
    }
}
   </script>

Try simply this line

var postcode=document.getElementById("postcode").value;

instead of

var postcode=document.forms["calculate"]["postcode"].value;

and

postcode==undefined

instead of

postcode==null

and for function validateForm() { you are missing the closing }

Try insert debugger here and try go throw method

<script type="text/javascript">
 function validateForm() {
     debugger;
     var postcode=document.forms["calculate"]["postcode"].value;
     if (postcode==null || postcode=="")
     {
       alert("Please enter the postcode to give you more accurate results");
       document.forms["calculate"]["postcode"].focus();
       return false;
     }

In the code you posted, you are missing a closing brace for your validateForm() function, so assuming that's your actual code, what's happening is that you get a JavaScript error on submit, which causes the browser to just post the form.