CODEWITHSUNDEEP
javascriptphpformsvalidation
DigitalDulphin
DigitalDulphin

Reputation: 55

JavaScript validation does not stop submission to php script

I want to validate my code with javaScript and determine if it is okay to submit to php. If it is correct I want the form to not submit to the php file that I have in 'action'. If it is inncorrect I do not want the form to submit to the php file, and I want to display an error message.

Right now the form uses "onsubmit="return Validate()"" to call the validation function which displays a message and returns false to stop the form action. The problem is that the form action does not get stopped, and still runs. For some reason when I click the submit button twice the php message gets displayed then the java script message gets displayed.

My html form:

            <form action="<?= base_Url(); ?>index.php/Login/loginuser" onsubmit="return Validate();" method="post" name="Login" accept-charset= "utf-8"  >

            Username: <input type="text" name="Username"  maxlength="21" />
                <br><br>
            Password:   <input type="text" name ="password" maxlength="20" />
                <br><br>

                <input type = "submit" value = "Login" class = "loginbutton" />
            </form>

My java script function.

function Validate() {           


        document.getElementById("errorMSG").innerHTML = "Validate ran...";
        return false;

    }

From what I read online when onsubmit="return Validate()" gets returned false the form is supposed to not run. Thought this was right but cant figure out why its not working.

EDIT: I am useing codeigniter to display the url, and for other purposes on the project.

EDIT2: This is still not working... When the onsubmit is changed too, onsubmit="false" the php will not be called. Which is expected. When changed to onsubmit="true", the php will be called. Which is expected.

When onsubmit="return Validate();" and the Validation() function on says "return false;". It will for as expected. Same with return true. But when code gets placed in the function the boolean does not appear to be returned. The code below will not stop the php file from running when the login name is empty.

    function Validate() {           



        if (document.getElementsByName("Username")=="" )
        {
            document.getElementById("errorMSG").innerHTML = "Validate ran...";
            return false;               
        }
        else
        {
            return true;

        }
    }

I am testing with chrome and firefox. There are no error messages displayed in the console on google chrome. I am not familiar with the debug tool for fire fox but i see no error messages displayed either.

I am now going to change the jquery script line to an updated version, maybe it will help.. I am using code igniter with controllers, views, libraries... Everything was working fine until i started with the javascript validation.

Upvotes: 0

Views: 474

Answers (3)

Veshraj Joshi
Veshraj Joshi

Reputation: 3579

You should use return false only when mandatory fields are empty

function Validate() {
  // check whether mandatory fileds have some value or not 
  // document.getElementsByName("Username") always returns an array and will be robust way to access value by  index 0 iin array like - document.getElementsByName("Username")[0]
  if(document.getElementsByName("Username")[0].value == ""  || document.getElementsByName("password")[0].value)
  {
    document.getElementById("errorMSG").innerHTML = "All fields required";
    return false;
   }
   return true;
}

Upvotes: 2

Sherin Binu
Sherin Binu

Reputation: 520

1.It should be just "Validate()" for onsubmit, not "return Validate().

  1. And use onclick instead of onsubmit

Try this

<input type = "submit" value = "Login" class = "loginbutton" onclick = "Validate()"/>

Upvotes: 0

Kristoff
Kristoff

Reputation: 213

Please try this one 100% work 

onsubmit="myFunction();return false;"

Upvotes: 0

Related Questions