表单验证javascript（错误消息显示并快速消失）-Java 学习之路

-1

我想在输入元素旁边显示错误消息，如果没有错误消息，则将数据发送到服务器（从表单中清除数据），然后在提交时触发函数

问题是错误信息显示并迅速消失（闪烁）

但是当输入类型更改为按钮时

将工作，但数据将仍然在形式，而不是作为输入类型=“提交”将清除

<!DOCTYPE html>
    <html>
    <head>
        <title>     </title>
    </head>
    <body>
        <form>

          <table style="width:50%;">
            <tr>
                <td>first name</td>
                <td><input type="text" id="txtfname" /></td>
                <td><span id="error"></span></td>
            </tr>

            <tr>
                <td>age</td>
                <td><input type="number" id="txtage" onblur="checkAge(txtage)" /></td>      
                <td><span id="errorage"></span></td>
             </tr>

              <tr>
                  <td>user name</td>
                  <td><input type="text" id="txtuser" /></td>
                  <td><span id="erroruser"></span></td>
              </tr>





              <tr>
                  <td>country</td>
                  <td>
                      <select onselect="checkSelect(this)" id="slct">
                          <option selected="selected" value="default">select your country</option>
                          <option>egypt</option>
                          <option>usa</option>

                      </select>
                  </td>
                  <td><span id="errorslct"></span></td>

              </tr>


              <tr>
                  <td></td>
                  <td><input type="submit" value="register" onclick="allvalidate()" /></td>

              </tr>
            </table>





        </form>





        <script>

            function allvalidate() {
                validate();
                checkAge(txtage);
                checkuser(txtuser);
                checkSelect(this);
            }


                  function validate() {
                      var txtf = document.getElementById('txtfname');
                      if (txtf.value == 0 || txtf.value == null) {
                          document.getElementById('error').innerText = ('you must enter firstname');
                          document.getElementById('error').style.color = 'red';
                          txtf.focus();
                          return false;
                      }
                      else {
                          document.getElementById('error').innerText = ('');
                          //return true;
                      }


                  }

                function checkAge(input) {
                    if (input.value < 18 || input.value > 70) {
                        document.getElementById('errorage').innerText = ('age must be from 18 :70');
                        document.getElementById('errorage').style.color = 'red';
                        return false;
                    }
                    else {
                        document.getElementById('errorage').innerText = ('');
                        return true;
                    }

                }

                function checkuser(input) {
                    var pattern = '^[a-zA-Z]+$';
                    if (input.value.match(pattern)) {
                        document.getElementById('erroruser').innerText = '';
                        return true;
                    }
                    else {
                        document.getElementById('erroruser').innerText = ('enter valid email');
                        document.getElementById('erroruser').style.color = 'red';

                        return false;
                    }


                }

                function checkSelect() {
                    var select=document.getElementById('slct')
                    if (select.value=='default') {
                        document.getElementById('errorslct').innerText = ('you must choose country');
                        document.getElementById('errorslct').style.color = 'red';

                        return false;
                    }
                    else {
                        document.getElementById('errorslct').innerText = '';

                        return true;
                    }


                }




        </script>
    </body>
    </html>

1 回答

更改

<td><input type="submit" value="register" onclick="allvalidate()" /></td>

至：

<td><input type="submit" value="register" onclick="return allvalidate()" /></td>

否则，将丢弃布尔值 . 如果其中一个验证失败，您还需要更改 allvalidate 以实际返回 false ：

function allvalidate() {
    var validated = true;

    if (!validate()) validated = false;
    if (!checkAge(txtage)) validated = false;
    if (!checkuser(txtuser)) validated = false;
    if (!checkSelect(this)) validated = false;

    return validated;
}

回复于 2024-04-20T07:47:46+08:00

表单验证javascript（错误消息显示并快速消失）

1 回答

相关问题