Keep submit button disabled until form is complete and confirming password

问题

I know that there are a bunch of posts about this already, but no matter what I try, nothing works for my form.

I simply want the submit button to be disabled until all fields are filled in, and I want $mypassword checked to equal $myconfirmpassword before submitting.

If you can find something that works. THANK YOU SO MUCH!!

Obviously, some things are hidden for privacy purposes, as you can't see my CSS and PHP info.

<div id="container" style="height:700px;">
<a href="login.php" class="anchor"><div id="back">
 <h2>Back</h2>             
 </div></a>
    <div id="registration_container" >
   <table width="300" border="0" align="center" cellpadding="0" cellspacing="1" bgcolor="#FF9">
    <tr>
<form name="form3" method="post" action="check_finish_registration.php">
        <td>
        <table width="100%" border="0" cellpadding="3" cellspacing="1" bgcolor="#FF9">
            <tr>
                <td colspan="3"><strong>Complete Registration </strong></td>
            </tr>
            <tr>
                <td width="2000">First Name</td>
                <td width="6">:</td>
                <td width="294"><?php echo $fname ?></td>
            </tr>
            <tr>
                <td width="2000">Middle Name*</td>
                <td width="6">:</td>
                <td width="294"><input type="text" name="mymname" id="mymname"></td>
            </tr>
            <tr>
                <td width="2000">Last Name</td>
                <td width="6">:</td>
                <td width="294"><?php echo $lname ?></td>
            </tr>
             <tr>
                <td width="2000">Create a Username*</td>
                <td width="6">:</td>
                <td width="294"><input type="text" name="myusername" id="myusername"></td>
            </tr>
             <tr>
                <td width="2000">Create a Password*</td>
                <td width="6">:</td>
                <td width="294"><input type="text" name="mypassword" id="mypassword"></td>
            </tr>
             <tr>
                <td width="2000">Confirm Your Password*</td>
                <td width="6">:</td>
                <td width="294"><input type="text" name="myconfirmpassword" id="myconfirmpassword"></td>
            </tr>
             <tr>
                <td width="2000">Enter your Sigma Number*</td>
                <td width="6">:</td>
                <td width="294"><input type="text" name="mysnumber" id="mysnumber"></td>
            </tr>
             <tr>
                <td width="2000">E-Mail Address*</td>
                <td width="6">:</td>
                <td width="294"><input type="text" name="myemail" id="myemail"></td>
            </tr>
            <tr>


                <td width="2000">* required field</td>
                <td>&nbsp;</td>
                <td><input   type="submit" id='register' value="Register"disabled='disabled'></td>
            </tr>
        </table>
        </td>
</form>

     </tr>
    </table>
    </div>    
</div>

回答1:

Instead of disabling the submit button, why don't you just try to validate the form so that until the user enters the correct values, the form will not be submitted to the database? And about the password and confirm password fields validation

   <script type="text/javascript">
    function passwordConfirm() {
        var confirmPass = document.getElementById("confirmpassid").value
        if(pass != confirmPass) {
            alert("Mismatching passwords");
        }
      }

回答2:

Try not to use this but if you want you may give it a try (jQuery would be good)

var  els=[];
window.onload=function(){
    var inputs=document.getElementsByTagName('input');
    for(i=0; i<inputs.length;i++)
    {
        if(inputs[i].type=='text' || inputs[i].type=='password')
        {
            if(inputs[i].name!='fname' && inputs[i].name!='lname')
            {
                inputs[i].onkeyup=check;
                els.push(inputs[i]);
            }
        }
    }
}

function check()
{
    var isValid=true;
    for(i=0; i<els.length;i++)
    {
        if(!els[i].value.length) 
        {
            isValid=false;
            break;
        }
        else isValid=true;
    }
    var reg=document.getElementById('register');
    if(isValid && matctValidInputs()) reg.disabled=false;
    else reg.disabled=true;
}

function matctValidInputs()
{
    var re=/^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{3}$/;
    var ps=document.getElementById('mypassword');
    var cps=document.getElementById('myconfirmpassword');
    var snum=document.getElementById('mysnumber');
    var mail=document.getElementById('myemail');
    if(ps.value.length>5 && ps.value==cps.value && re.test(mail.value) && isNumber(snum.value))
        return true;
    else return false;
}

function isNumber(n) {
    return !isNaN(parseFloat(n)) && isFinite(n) && n.length>5;
}

Before you test the demo:

Password must be 6 characters and match with confirm password.
The Sigma Number must be a number and minimum 6 digits.
Email must match a valid email (very basic regex)
No alerts/notifications given.

DEMO.

回答3:

just copy and paste my code.there might be few things you might wanna improve.If it is so,let me know

<script type="text/javascript">
function fnc()
{
var name=document.getElementById("mymname").value;
var username=document.getElementById("myusername").value;
var password=document.getElementById("mypassword").value;
var confirmpassword=document.getElementById("myconfirmpassword").value;
var number=document.getElementById("mysnumber").value;
var email=document.getElementById("myemail").value;
if(name!='' && username!='' && password!='' && confirmpassword!='' && number!='' &&  email!='')
 {
   document.getElementById("register").disabled=false;
 }
 else
 document.getElementById("register").disabled=true;
}
function check()
{
var password=document.getElementById("mypassword").value;
var confirmpassword=document.getElementById("myconfirmpassword").value;
if(password!=confirmpassword)
    {
        alert("password missmatches");
        return false;
    }

}
</script>
<div id="container" style="height:700px;">
<a href="login.php" class="anchor"><div id="back">
<h2>Back</h2>             
</div></a>
<div id="registration_container" >
<table width="300" border="0" align="center" cellpadding="0" cellspacing="1" bgcolor="#FF9">
<tr>
<form name="form3" method="post" action="check_finish_registration.php" onSubmit="return check()">
    <td>
    <table width="100%" border="0" cellpadding="3" cellspacing="1" bgcolor="#FF9">
        <tr>
            <td colspan="3"><strong>Complete Registration </strong></td>
        </tr>
        <tr>
            <td width="2000">First Name</td>
            <td width="6">:</td>
            <td width="294"><?php echo $fname ?></td>
        </tr>
        <tr>
            <td width="2000">Middle Name*</td>
            <td width="6">:</td>
            <td width="294"><input type="text" name="mymname" id="mymname" onKeyUp="fnc()"></td>
        </tr>
        <tr>
            <td width="2000">Last Name</td>
            <td width="6">:</td>
            <td width="294"><?php echo $lname ?></td>
        </tr>
         <tr>
            <td width="2000">Create a Username*</td>
            <td width="6">:</td>
            <td width="294"><input type="text" name="myusername" id="myusername" onKeyUp="fnc()"></td>
        </tr>
         <tr>
            <td width="2000">Create a Password*</td>
            <td width="6">:</td>
            <td width="294"><input type="text" name="mypassword" id="mypassword" onKeyUp="fnc()"></td>
        </tr>
         <tr>
            <td width="2000">Confirm Your Password*</td>
            <td width="6">:</td>
            <td width="294"><input type="text" name="myconfirmpassword" id="myconfirmpassword" onKeyUp="fnc()">

            </td>
        </tr>
         <tr>
            <td width="2000">Enter your Sigma Number*</td>
            <td width="6">:</td>
            <td width="294"><input type="text" name="mysnumber" id="mysnumber" onKeyUp="fnc()"></td>
        </tr>
         <tr>
            <td width="2000">E-Mail Address*</td>
            <td width="6">:</td>
            <td width="294"><input type="text" name="myemail" id="myemail" onKeyUp="fnc()"></td>
        </tr>
        <tr>


            <td width="2000">* required field</td>
            <td>&nbsp;</td>
            <td><input   type="submit" id="register" value="Register" disabled='disabled' "></td>
        </tr>
    </table>
    </td>
  </form>

 </tr>
 </table>
 </div>

 </div>

来源：https://stackoverflow.com/questions/12380824/keep-submit-button-disabled-until-form-is-complete-and-confirming-password

标签

javascript

html

forms

disabled-input