jQuery表单输入字段验证，无需使用插件

Question

I'm working with form validation I spend 2,3 days to solve this but couldn't achieve it.i'm new to jquery I have just started working on jquery. my question is In this form how should I have to add other input fields like radio, checkbox, select option, upload file and this input field should validate, And in my code email, phone number also not validated correctly and I want to get success message after submitting the form and CSS I wrote display: none through jquery I want to show success message. And form will be reset again after submitted successfully. Here my intention to do form based on required attr example if I have more than 1 text field should be validate using same code using data-validate attr like this so, far I have tried like this. Can anyone help me out with this problem? Any help will be appreciated.

 $('.success_msg').fadeIn().delay(3000).fadeOut();
 $('input , textarea , select').val('').removeClass('input-error');
 event.preventDefault();

 var Validator = function(formObject) { this.form = $(formObject); var Elements = { name: { reg: /^[a-zA-Z]{2,20}$/, error: "Not a valid name.", }, email: { reg: /^[az-0-9_+.-]+\\@([a-z0-9-]+\\.)+[a-z0-9]{2,7}$/i, error: "Not a valid e-mail address.", }, phone: { reg: /^\\(?([0-9]{3})\\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/, error: "Not a valid number.", }, message: { reg: /^(?!\\s*$).+/, error: "Message field cannot be empty.", }, }; var handleError = function(element, message) { element.addClass('input-error'); var $err_msg = element.parent('div'); $err_msg.find('.error').remove(); var error = $('<div class="error"></div>').text(message); error.appendTo($err_msg); element.keyup(function() { $(error).fadeOut(1000, function() { element.removeClass('input-error'); }); }); }; this.validate = function() { var errorCount = 0; this.form.find("input, textarea").each(function(index, field){ var type = $(field).data("validation"); var validation = Elements[type]; if (validation){ if (!validation.reg.test($(field).val())){ errorCount++; handleError($(field), validation.error); } } }) return errorCount == 0; }; }; $(function(){ $("form#test").on("submit", function(event){ //event.preventDefault(); return new Validator(this).validate(); // "this" here refers to the form }) }) 

  body { background: #fff; color: #333; font: 76% Verdana, sans-serif; } form { margin: 1em 0 0 2em; width: 90%; } fieldset { margin: 0; border: 1px solid #ccc; padding-bottom: 1em; } legend { font-weight: bold; text-transform: uppercase; } label { float: left; width: 5em; padding-right: 2em; font-weight: bold; } div { margin-bottom: 30px; } input { font: 1em Verdana, sans-serif; } fieldset ul li input { float: left; width: 120px; border: 1px solid #ccc; } textarea { width: 300px; height: 200px; border: 1px solid #ccc; font: 1em Verdana, sans-serif; } form p { margin: 0; padding: 0.4em 0 0 7em; } form p input { background: #666; color: #fff; font-weight: bold; } div.error { clear: left; margin-left: 5.3em; color: red; padding-right: 1.3em; height: 100%; padding-bottom: 0.3em; line-height: 1.3; } .input-error { background: #ff9; border: 1px solid red; } .success_msg { width: 350px; line-height: 40px; border: 1px solid green; border-radius: 5px; background-color: rgba(213, 255, 187, 0.7); display: none; position: absolute; bottom: 5px; left: 50%; transform: translateX(-50%); z-index: 999; text-align: center; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form action="#" method="post" id="test"> <fieldset> <legend>Contact information</legend> <div> <label for="firstname">Firstname:</label> <input type="text" name="firstname" id="firstname" data-validation="name" /> </div> <div> <label for="lastname">Lastname:</label> <input type="text" name="lastname" id="lastname" data-validation="name" /> </div> <div> <label for="email">Email:</label> <input type="email" name="email" id="email" data-validation="email"/> </div> <div> <label for="phone">phone</label> <input type="number" name="phone" id="phone" data-validation="phone" /> </div> <div> <label>Gender:</label> <input type="radio" name="gender" value="male" data-validation="gender" /> <input type="radio" name="gender" value="female" data-validation="gender"> </div> <div> <label>select</label> <input type="checkbox" name="checkbox" id="checkbox1" value="demo1" data-validation="checkbox" /> <input type="checkbox" name="checkbox" id="checkbox2" value="demo2" data-validation="checkbox" /> <input type="checkbox" name="checkbox" id="checkbox3" value="demo3" ata-validation="checkbox" /> </div> <select data-validation="selectOption"> <option value="">Select any option</option> <option value="red">Red</option> <option value="blue">Blue</option> <option value="green">Green</option> </select> <div> <label>Upload:</label> <input type="file" name="file" id="file" data-validation="file" /> </div> <div> <label for="message">Message:</label> <textarea id="message" name="message" cols="30" rows="15" data-validation="message"></textarea> </div> <p><input type="submit" name="send" id="send" value="Send" /></p> </fieldset> <div class="success_msg"> <p>Form submitted Successfully</p> </div> </form> 

Answer 1

Use this code for two sample fields email and password:

<!DOCTYPE html>
<html lang="en">

<head>
    <script src="jquery-3.4.0.min.js"></script>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #txt1{

        margin-left:23px;
        border-radius: 12px;
       }
       #txt2{
        border-radius: 12px;
       }
       #btn1{
        border-radius: 12px;
        width: 8em;  height: 2em;
        cursor:pointer;
        background-color: #008CBA;
       }
       #lbl1,#lbl2{
        font-family: "Comic Sans MS", cursive, sans-serif;
        color:red;
       }
    </style>
</head>

<body>
    <div class="container">
        <form>
            <center> <label id="lbl1">Email: </label><input type="text" id="txt1"></center></input><br>
            <center><label id="lbl2">Password: </label><input type="password" id="txt2"></center></input>
            <br><br>
            <center><input type="button" id="btn1" name="btn1" value="Login" style="color:darkblue;font-size:15px;"></center></input>
        </form>

    </div>
    <script>
        $(document).ready(function () {
            $('#btn1').click(function () {
                var email = $('#txt1').val();
                var pass = $('#txt2').val();
                if (email == '') {
                    $('input[type="text"]').css("border", "2px solid red");
                    $("#txt1").parent().after("<div class='validation' style='color:red;margin-left:93px;'><center>Please enter email address</center></div>");
                    alert("hi");
                }
                else {

                }
                if (pass == '') {
                    $('input[type="password"]').css("border", "2px solid red");
                    $("#txt2").parent().after("<div class='validationp' style='color:red;margin-left:70px;'><center>Please enter password</center></div>");
                }
                $('input[type="text"]').keydown(function () {
                    $('input[type="text"]').css("border", "");
                    $(".validation").remove();
                });
                $('input[type="password"]').keydown(function () {
                    $('input[type="password"]').css("border", "");
                    $(".validationp").remove();

                });

            });
        });

    </script>
</body>

</html>