Блог

Главная - Вопросы по программированию - Проверка формы Javascript на соответствие электронным письмам и почтовому индексу

Проверка формы Javascript на соответствие электронным письмам и почтовому индексу

#javascript #html

#javascript #HTML

Вопрос:

Я пытаюсь заставить проверку формы работать для выполнения домашнего задания, но мой учитель по сути бесполезен. Я должен следить за этим сайтом (https://jqueryvalidation.org /) документация для создания формы, которая проверяет соответствие электронных писем, а также наличие почтового индекса, и я уже пробовал несколько разных методов, чтобы это работало. Единственное, что сейчас работает, — это js/jquery.validate.js файл, который я загрузил с веб-сайта, но в настоящее время он проверяет только действительное электронное письмо, а не то, совпадает ли электронное письмо с подтверждением или действительный почтовый индекс. Итак, я пробовал использовать локальный скрипт для добавления правил и сообщений для этих двух вещей, но они, похоже, не работают. Я также пытался сделать это во внешнем файле .js (я опубликую код для этого под кодом .html ниже), но это также не работает.

 ======Index.html:======

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Join Email List</title>
    <link rel="stylesheet" href="email_list.css">

</head>
<body>
    <section>
        <h1>Please join our email list</h1>
        <h4>* denotes required field</h4>
        <form id="email_form" name="email_form" action="join.html" method="get">
            <label for="email">Email Address:*</label>
            <input type="email" id="email" name="email" required><br>

            <label for="email_confirm">Re-enter Email:*</label>
            <input type="text" id="email_confirm" name="email_confirm" required><br>

            <label for="first_name">First Name:</label>
            <input type="text" id="first_name" name="first_name"><br>

            <label for="last_name">Last Name:</label>
            <input type="text" id="last_name" name="last_name"><br>

            <label for="zip">5-Digit Zip Code:*</label>
            <input type="text" id="zip" name="zip" required><br>

            <label>amp;nbsp;</label>
            <input type="submit" id="join" name="join" value="Join our List">
            <input type="reset" id="reset" name="reset" value="Reset"><br>
        </form>
    </section>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script src="js/jquery.validate.js"></script>
    <script src="js/validate.js"></script>
    <script>
    $( "#email_form" ).validate({
  rules: {
  
    email_confirm: {
      equalTo: "#email"
    }
    
    zip: {
        minlength: 5
        maxlength: 5
    }
  }
  
  messages: {
    email_confirm: {
        equalTo: "E-mail must match."
        }
    zip: {
        minlength: "Zip code must be 5 digits.",
        maxlength: "Zip code must be 5 digits."
        }
});
</script>
</body>
</html>```



========js/Validate.js:=======

$().ready(function() {
    $("email_form").validate();
        rules: {
            
            email: {
                required: true,
                email: true
            }
            
            email_confirm: {
                equalTo: "#email"
            }
            
            zip: {
                minlength: 5,
            }
        }
            
        messages: { 
        
            email: {
                required: "Please enter an e-mail",
                email: "Please enter a valid e-mail",
            }
            
            email_confirm: {
                equalTo: "Your e-mails must match"
            }
            
            zip: {
                minlength: "Please enter a valid 5-digit zip code"
            }
        
        
        }
}

Ответ №1:

Скрипт в HTML содержит ошибки в validate ()

Попробуйте это:

     <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Join Email List</title>
    <!-- <link rel="stylesheet" href="email_list.css"> -->

</head>
<body>
    <section>
        <h1>Please join our email list</h1>
        <h4>* denotes required field</h4>
        <form id="email_form" name="email_form" action="join.html" method="get">
            <label for="email">Email Address:*</label>
            <input type="email" id="email" name="email" required><br>

            <label for="email_confirm">Re-enter Email:*</label>
            <input type="text" id="email_confirm" name="email_confirm" required><br>

            <label for="first_name">First Name:</label>
            <input type="text" id="first_name" name="first_name"><br>

            <label for="last_name">Last Name:</label>
            <input type="text" id="last_name" name="last_name"><br>

            <label for="zip">5-Digit Zip Code:*</label>
            <input type="text" id="zip" name="zip" required><br>

            <label>amp;nbsp;</label>
            <input type="submit" id="join" name="join" value="Join our List">
            <input type="reset" id="reset" name="reset" value="Reset"><br>
        </form>
    </section>
    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.2/dist/jquery.validate.min.js"></script>
    <!-- <script src="js/validate.js"></script> -->
    <script>
    $( "#email_form" ).validate({
  rules: {
  
    email_confirm: {
      equalTo: "#email:checked"
    },
    
    zip: {
        minlength: 5,
        maxlength: 5
    }
  },
  
  messages: {
    email_confirm: {
        equalTo: "E-mail must match."
        },
    zip: {
        minlength: "Zip code must be 5 digits.",
        maxlength: "Zip code must be 5 digits."
        }
}});
</script>
</body>
</html>

Я исправил синтаксические ошибки в теге script, также я добавил cdn скрипта для проверки jquery ==>

Комментарии:

1. Большое спасибо! Он отлично работает, и теперь я понимаю, почему он не работал.

Ответ №2:

Используйте тип атрибута и шаблон для аннулирования элементов html,

https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/pattern,

https://webdesign.tutsplus.com/tutorials/html5-form-validation-with-the-pattern-attribute—cms-25145

Ответ №3:

Вы пропустили необходимый скрипт и допустили некоторые ошибки. Исправленную версию с комментариями вы найдете ниже. Не забудьте удалить их.

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Join Email List</title>
    <link rel="stylesheet" href="email_list.css">  
    <!-- this stylsheet is necessary for styling of the warnings -->
    <link rel="stylesheet" href="https://jqueryvalidation.org/files/demo/site-demos.css">
</head>
<body>
    <section>
        <h1>Please join our email list</h1>
        <h4>* denotes required field</h4>
        <form id="email_form" name="email_form" action="join.html" method="get">
            <label for="email">Email Address:*</label>
            <input type="email" id="email" name="email" required><br>

            <label for="email_confirm">Re-enter Email:*</label>
            <input type="text" id="email_confirm" name="email_confirm" required><br>

            <label for="first_name">First Name:</label>
            <input type="text" id="first_name" name="first_name"><br>

            <label for="last_name">Last Name:</label>
            <input type="text" id="last_name" name="last_name"><br>

            <label for="zip">5-Digit Zip Code:*</label>
            <input type="text" id="zip" name="zip" required><br>

            <label>amp;nbsp;</label>
            <input type="submit" id="join" name="join" value="Join our List">
            <input type="reset" id="reset" name="reset" value="Reset"><br>
        </form>
    </section>

    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
    <script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js"></script> // script missing
    <script>
    $("#email_form").validate({  // # missing
        rules: {

            email: {
                required: true
            }, // comma missing

            email_confirm: {
                equalTo: "#email"
            }, // comma missing

            zip: {
                minlength: 5, // comma missing
            }
        }, // comma missing

        messages: {

            email: {
                required: "Please enter an e-mail",
                email: "Please enter a valid e-mail", // comma missing
            },

            email_confirm: {
                equalTo: "Your e-mails must match"
            }, // comma missing

            zip: {
                minlength: "Please enter a valid 5-digit zip code"
            }


        }
});
</script>
</body>
</html>
Метки: