即使“设置密码”和“确认密码”的值不相等，表格也会提交。 [英] Following form submits even though values of 'set password' and 'confirm password' are not equal.

问题描述

我的HTML代码是：

 <   form     id   =  register    method   = 发布   < span class =code-attribute> action   =  finish.html >  
 
设置密码*：
 
 <  输入    type   = 密码    id   =  setpassword   必需  =  required >  
 
确认密码*：
 
 <  输入   类型  = 密码    id   = 确认   必需  =  required    onkeyup   =  checkPass（）;    /  >  <   span     id   =   message2    class  < span class =code-keyword> =  message2 >  <   / span  >  
 
 <  输入    type   =  submit    id   = 提交 >  
 
 <   / form  >  

和我尝试过使用javascript：

 function checkPass（）
 {
 
  var  pass1 = document.getElementById（'  setpassword' ）; 
  var  pass2 = document.getElementById（' 确认'）; 
 
  var  message = document.getElementById（' 消息2' ）; 
 
  var  goodColor =   ＃0C6\" ; 
  var  badColor =  ＃FF9B37< /跨度>; 
 
  if （pass1。 value  == pass2。 value ）{
 
 
 pass2.style.backgroundColor = goodColor; 
 message.style.color = goodColor; 
 message.innerHTML =  匹配！ 
  return   true ; 
 
}  else  {
 
 pass2.style.backgroundColor = badColor; 
 message.style.color = badColor; 
 message.innerHTML =  不匹配！ 
 返回  false ; 
} 
 
 
} 

仍然如果我为设置密码和确认密码输入不同的值，则表单提交时不会发出任何警告。



表单不得提交，直到两者的值都不是相同。请帮忙。



我是新来的。谢谢。

解决方案

问题在于当你点击提交按钮时，你所拥有的唯一代码（checkPass）不会执行...

你有一个选项是向checkPass添加一些代码，启用禁用提交按钮。

 <  ！DOCTYPE     html     PUBLIC     -  // W3C // DTD     XHTML     1.0     Transitional // EN   http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd >  
 <   html     xmlns   =  http://www.w3.org/1999/xhtml  >  
 <   head  >  
 <   title  >  Untitled Page <   / title  >  
 <   / head  >  
 <  正文 >  
 <  表单    id   =  注册   方法 < span class =code-keyword> =  post   操作  =  finish.html >  
设置密码*：
 <   input     type   = 密码    id   =  setpassword    required   =  required >  
确认密码*：
 <  输入    type   = < span class =code-keyword> password    id   = 确认   必需  =  required    onkeyup   =  checkPass（）;    /  >  <   span   
   
            < span class =code-attribute>       id   =  message2    class   =  message2 < span class =code-keyword>>  <   / span  >  
 <   input     type   = 提交    id   = 提交   已停用  = 已禁用 >  
 <   / form  >  
 
 <   script    类型  =  text / ecmascript >  
  function  checkPass（） {
  var  pass1 =  document  .getElementById（ '  setpassword'）; 
  var  pass2 =  document  .getElementById（'  确认'）; 
  var  btn =  document  .getElementById（'   submit'）; 
 
  var  message =  document  .getElementById（'  message2'）; 
 
  var  goodColor =   ＃0C6\" ; 
  var  badColor =  ＃FF9B37< /跨度>; 
 
  if （pass1.value == pass2.value）{
 pass2.style.backgroundColor = goodColor; 
 message.style.color = goodColor; 
 message.innerHTML =  匹配！ 
 
 btn。 disabled =  false ; 
 
  return   true ; 
}  else  {
 pass2.style.backgroundColor = badColor; 
 message.style.color = badColor; 
 message.innerHTML =  不匹配！ 
 
 btn.disabled =  true ; 
 
  return   false ; 
} 
} 
 <   /   script  >  
 <   / body  >  
 <   / html  >  

你有单击提交按钮调用checkPass函数：

< form id =registermethod =postaction =finish.htmlonsubmit =return checkPass （）> 

我也注意到action属性的值是错误的，它不能是一个html文件，它必须是一个服务器端脚本文件，如php

My HTML code is:

<form id="register" method="post" action="finish.html">

        Set Password * :

        <input type="password" id="setpassword" required="required">

        Confirm Password * :

        <input type="password" id="confirm" required="required" onkeyup="checkPass();" /><span id="message2" class="message2"></span>

    <input type="submit" id="submit">

    </form>

and I have tried using javascript that is :

function checkPass()
    {

        var pass1 = document.getElementById('setpassword');
        var pass2 = document.getElementById('confirm');

        var message = document.getElementById('message2');

       var goodColor = "#0C6";
        var badColor = "#FF9B37";

        if(pass1.value == pass2.value){


            pass2.style.backgroundColor = goodColor;
            message.style.color = goodColor;
            message.innerHTML = "Matching!"
            return true;

        }else {

            pass2.style.backgroundColor = badColor;
            message.style.color = badColor;
            message.innerHTML = "Doesn't Matching!"
            return false;
        }


    }

Still if I enter different values for `set password` and `confirm password`, form submits without any warning.

The form must not submit until the values of both are not same. Please help.

I am new to here.Thanks in advance.

解决方案

The problem is that the only code you have (checkPass) does not execute when hitting submit button...
One of the options you have is add some code to checkPass that will enable disable the submit button.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Untitled Page</title>
</head>
<body>
    <form id="register" method="post" action="finish.html">
    Set Password * :
    <input type="password" id="setpassword" required="required">
    Confirm Password * :
    <input type="password" id="confirm" required="required" onkeyup="checkPass();" /><span

        id="message2" class="message2"></span>
    <input type="submit" id="submit" disabled="disabled">
    </form>

    <script type="text/ecmascript">
        function checkPass() {
            var pass1 = document.getElementById('setpassword');
            var pass2 = document.getElementById('confirm');
            var btn = document.getElementById('submit');

            var message = document.getElementById('message2');

            var goodColor = "#0C6";
            var badColor = "#FF9B37";

            if (pass1.value == pass2.value) {
                pass2.style.backgroundColor = goodColor;
                message.style.color = goodColor;
                message.innerHTML = "Matching!"

                btn.disabled = false;

                return true;
            } else {
                pass2.style.backgroundColor = badColor;
                message.style.color = badColor;
                message.innerHTML = "Doesn't Matching!"

                btn.disabled = true;

                return false;
            }
        }
    </script>
</body>
</html>

You have to call the checkPass function on clicking the submit button:

<form id="register" method="post" action="finish.html"  onsubmit="return checkPass()"  >

I also noticed the value for action attribute is wrong, it cannot be an html file, it has to be a server-side script file like php.

这篇关于即使“设置密码”和“确认密码”的值不相等，表格也会提交。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！