Возникли проблемы с проверкой возраста в html формах - PullRequest
Новая
       5

Возникли проблемы с проверкой возраста в html формах

0 голосов
/ 15 апреля 2020

Тег абзаца, в котором я хочу распечатать, что ввод в порядке, мигает только секунду и затем исчезает. 

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>HOMEWORK</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
   </head>
    <body>
    <h1 style="text-align:center">FORM FILL</h1>
    <p>Kindly fill in the following details as mentioned below : </p>

    <form name="FORM"  onsubmit="checkform()">

       <!---- <label for="FName">Name :</label><br>
        <input type="text" id="FName" name="FName"><br><br>--->
        <label for="Age">Age :</label><br><br>
        <input type="text" id="Age" name="Age"><br><br>
        <input type="button" value="Submit">
    </form><br><br>
    <p id="demo"></p>

    <script>
        function checkform() 
        {
            var x, text;
            x = document.forms["FORM"]["Age"].value;
            if (x<1||x>100||x==''||isNaN(x))
                {
                    alert("Invalid Age !!!");
                    text = "Input not valid";
                   // return false;
                } 
            else
                {
                    text = "Input OK";
                   // return true;
                } 
            document.getElementById("demo").innerHTML = text;
        }
    </script>
</body>
</html>

Может кто-нибудь сказать мне, что я делаю неправильно? А также, какой самый короткий метод для проверки формы?

1 Ответ

1 голос
/ 15 апреля 2020

Вам необходимо предотвратить перенаправление страницы, внесены некоторые изменения в ваш код, проверьте его один раз: 

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>HOMEWORK</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
   </head>
    <body>
    <h1 style="text-align:center">FORM FILL</h1>
    <p>Kindly fill in the following details as mentioned below : </p>

    <form name="FORM"  onsubmit="return mySubmitFunction(event)">

       <!---- <label for="FName">Name :</label><br>
        <input type="text" id="FName" name="FName"><br><br>--->
        <label for="Age">Age :</label><br><br>
        <input type="text" id="Age" name="Age"><br><br>
        <input type="submit" value="Submit">
    </form><br><br>
    <p id="demo"></p>

    <script>
    function mySubmitFunction(e) { 
         e.preventDefault(); 
         try {
          checkform();
             } catch (e) {
                 throw new Error(e.message);
                    }
            return false;
        }
        function checkform() 
        {

            var x, text;
            x = document.forms["FORM"]["Age"].value;
            if (x<1||x>100||x==''||isNaN(x))
                {
                    alert("Invalid Age123 !!!");
                    text = "Input not valid";
                   // return false;
                } 
            else
                {
                    text = "Input OK";
                   // return true;
                } 
           document.getElementById("demo").innerHTML = text;
        }

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

Надеюсь, это поможет!

...