Disable submit button until form is valid using javascript?

Question

I have a Javascript function like this:

function validatePath() 
{
    var path = document.getElementById('server_path').value;
    if (path.search(":") == -1)
    {
        document.getElementById('path_error').innerHTML="Invalid Server Path!";
    }
    else
    {
        var host_name = path.split(":")[0]
        var regex = new RegExp("^[a-zA-Z0-9.]*$"); 
        if(!(regex.test(host_name)))
        {
            document.getElementById('path_error').innerHTML="Invalid Server Path!";
        } 

    }
}

If the server_path is incorrect it displays the error but the form is still submitted. I don't want user to be able to submit the form until the server_path is correct. How can I do that?

I'm not even going to go into depth at how duplicated this is google.com/search?q=Disable+form+submit — Isaac
– Isaac, Commented May 30, 2013 at 6:26

RobG · Accepted Answer · 2013-05-30 06:21:16Z

3

The usual strategy is to use the form's submit handler and return false to stop submission if validation fails:

<form onsubmit="return validatePath();" ...>

Then in the function (pseudocode):

function validatePath() {

  if (validation fails) {
    return false;
  }

  // return any value other than false and the form will submit,
  // including undefined
}

answered May 30, 2013 at 6:21

RobG

148k32 gold badges180 silver badges216 bronze badges

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

Comments

Florent Hemmi · Accepted Answer · 2013-05-30 06:26:06Z

An other solution:

function validatePath() {
    var path = document.getElementById('server_path').value;
    var submitButton = document.getElementById('submit');

    document.getElementById('path_error').innerHTML='';
    submitButton.removeAttribute('disabled');

    if (path.search(":") == -1){
        document.getElementById('path_error').innerHTML="Invalid Server Path!";
        submitButton.setAttribute('disabled', 'disabled');
    }
    else{
        var host_name = path.split(":")[0]
        var regex = new RegExp("^[a-zA-Z0-9.]*$"); 
        if(!(regex.test(host_name))){
            document.getElementById('path_error').innerHTML="Invalid Server Path!";
            submitButton.setAttribute('disabled', 'disabled');
        } 

    }

 }

See in action: http://jsfiddle.net/rUcQc/.

lakshya_arora · Accepted Answer · 2013-05-30 06:23:02Z

You can disable the submit button until the path is correct. Like this

<input type='submit' disabled='true' onclick='return validatePath()' id='submit'/>

I made some changes in your javascript code.

function validatePath() {
        var path = document.getElementById('server_path').value;
        if (path.search(":") == -1){
            document.getElementById('path_error').innerHTML="Invalid Server Path!";
        }
        else{
            var host_name = path.split(":")[0]
            var regex = new RegExp("^[a-zA-Z0-9.]*$"); 
            if(!(regex.test(host_name))){
                document.getElementById('path_error').innerHTML="Invalid Server Path!";
            }
              else {
               document.getElementById('submit').disabled=false;
              } 

            }

    }

Collectives™ on Stack Overflow

Disable submit button until form is valid using javascript?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related