Why validation is not working properly in JavaScript?

Question

I am having an input field and a submit button:

        <form action="" method="post">
           <input type="text" name="sponsar_name" id="sponsar_name" />
          <input type="submit" value="Submit"  class="btn-submit" name="submit" onClick="validate()" >
    </form>

      function validate()
    {
        var flag = 0;
    if(document.getElementById("sponsar_name").value == null || document.getElementById("sponsar_name").value == "")
        {
            document.getElementById("sponsar_name").style.borderColor = 'red';
            flag = 1;
            }
            else
            {
                        document.getElementById("sponsar_name").style.borderColor = '';
                }

                if(flag==1)
                {
                    return false;
                }
                else
                {
                    return true;
                }

    }
                     </script>

I have applied a function onClick on submit button .this I have applied for validation.

When I click on submit button it shows red background of textbox but refreshes the page immediately.

If the textbox is blank it should not refresh the page, but in my code it is doing so.

Can anyone help me?

top comment is right. and you have good code. the first sugestion creating varibale for document.getElementById("sponsar_name"). — Mediator
– Mediator, Commented Jun 18, 2014 at 5:55

Laukik Patel · Accepted Answer · 2014-06-18 05:53:58Z

1

Try with

<form action="" method="post">
   <input type="text" name="sponsar_name" id="sponsar_name" />
   <input type="submit" value="Submit"  class="btn-submit" name="submit" onClick="return validate()" >
</form>

answered Jun 18, 2014 at 5:53

Laukik Patel

7437 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Anuraj · Accepted Answer · 2014-06-18 05:54:50Z

0

You need to use either onClick="return validate()" or onSubmit="return validate()". It will fix the problem.

using onClick="return validate()"

<form action="" method="post">
    <input type="text" name="sponsar_name" id="sponsar_name" />
    <input type="submit" value="Submit"  class="btn-submit" name="submit" onClick="return validate()" >
</form>

using onSubmit="return validate()"

<form action="" method="post" onSubmit="return validate()">
    <input type="text" name="sponsar_name" id="sponsar_name" />
    <input type="submit" value="Submit"  class="btn-submit" name="submit">
</form>

answered Jun 18, 2014 at 5:54

Anuraj

19.7k7 gold badges61 silver badges84 bronze badges

Comments

gprathour · Accepted Answer · 2014-06-18 05:57:08Z

0

You need to do it this way,

<input type="submit" value="Submit" class="btn-submit" name="submit" onClick="return validate()" >

And when you will return false in your method, your form won't be submitted.

answered Jun 18, 2014 at 5:57

gprathour

15.4k5 gold badges72 silver badges92 bronze badges

Comments

chandu · Accepted Answer · 2014-06-18 05:57:41Z

0

Change you form like this: remove onClik function and add the onSubmit on form header

<form action="" method="post" onsubmit="return validate()">
           <input type="text" name="sponsar_name" id="sponsar_name" />
          <input type="submit" value="Submit"  class="btn-submit" name="submit"/> 
    </form>

answered Jun 18, 2014 at 5:57

chandu

2,2763 gold badges23 silver badges35 bronze badges

Collectives™ on Stack Overflow

Why validation is not working properly in JavaScript?

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related