在表单完成并确认密码之前,请禁用提交按钮

Keep submit button disabled until form is complete and confirming password

本文关键字:按钮 提交 表单 密码 确认      更新时间:2023-09-26

我知道已经有很多关于这方面的帖子了,但无论我尝试什么,都不适合我的表单。

我只想在填写完所有字段之前禁用提交按钮,并希望在提交之前将$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>

与其禁用提交按钮,为什么不尝试验证表单,以便在用户输入正确的值之前,表单不会提交到数据库?关于密码和确认密码字段验证

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

尽量不要使用这个,但如果你愿意,你可以尝试一下(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;
}

测试演示之前:

  1. 密码必须为6个字符,并与确认密码匹配
  2. Sigma Number必须是一个数字,并且至少有6位数字
  3. 电子邮件必须与有效的电子邮件匹配(非常基本的正则表达式)
  4. 未发出警报/通知

演示

只需复制并粘贴我的代码。您可能需要改进以下几点。如果是这样,请告诉我

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