保持提交按钮禁用，直到表单填写完毕并确认密码(Keep submit button disabled

我知道有一堆关于这个帖子了，但不管我怎么努力，没有什么适合我的方式。

我只是想提交按钮被禁止，直至所有字段填写，我想$mypassword检查等于$myconfirmpassword提交前。

如果你能找到一些作品。非常感谢！！

很显然，有些事情是隐藏隐私的目的，因为你看不到我的CSS和PHP的信息。

<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>

Answer 1:

相反，禁用提交按钮，你为什么不只是尝试验证的形式，使得直到用户输入正确的价值观，表单就不会被提交到数据库？约在密码和确认密码字段的验证

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

Answer 2:

尽量不要使用这个，但如果你愿意，你可以试试看（ jQuery的将是一件好事）

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;
}

之前测试的演示：

密码必须是6个字符，并配合确认密码。
该Sigma Number必须是一个数和最小6位数字。
电子邮件必须匹配一个有效的电子邮件（很基本的正则表达式）
无警报/通知给出。

DEMO 。

Answer 3:

只需复制并粘贴我code.there可能是你可能想improve.If就这样几件事情，让我知道

<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>

文章来源: Keep submit button disabled until form is complete and confirming password