使用jquery驗證表單輸入字段

Question

1. 我正在進行表單驗證。 一切都工作正常，我真正想要的是我想添加一些更多的輸入字段，如復選框，單選按鈕，選擇和textarea，上傳文件等，所以我希望它們也被驗證的形式。

2. 我收到電子郵件輸入錯誤但它無法正常工作，因為它應首先驗證電子郵件然后它應該刪除錯誤消息，但它只是在輸入幾個字符后刪除錯誤消息。

3. 我想要驗證電話號碼。 就像用戶應該在印度輸入10位數字一樣，如果在另一個國家會有所不同，我有點困惑如何去做。

4. 我希望在所有字段都正確驗證時彈出成功消息。 我試過的是這個：

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

5. 我希望在完成所有驗證並發送成功消息后清除所有字段。

誰能指出我正確的方向？

 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

這是工作代碼：

https://jsfiddle.net/bhumi/o2gxgz9r/47570/

我已經更改了選擇器以使用id

你需要在句柄錯誤中使用循環：

var Validator = function(form) {

    this.form = $(form);

    var Elements = {
        name: {
            selector: $('input[type=text]'),
            reg: /^[a-zA-Z]{2,20}$/
        },

        email: {
            selector: $('input[type=email]'),
            reg: /^[a-z-0-9_+.-]+\@([a-z0-9-]+\.)+[a-z0-9]{2,7}$/i
        },

        message: {
            selector: $('textarea'),
            reg: /^\s+$/
        }
    };

    var handleError = function(element, message, v1) {
        if (v1.selector.length > 1) {
            var ss = v1.selector;

            $(ss).each(function(i, v) {
            $(v).removeClass('input-error');
            if($(v).val() == ''){
              $(v).addClass('input-error');
              var $err_msg = $(v).parent('div');
              if($(v).parent('div').find('.error').length == 0) {
                    var error = $('<div class="error"></div>').text(message);
               }else{
                    $(v).parent('div').find('.error').text('');
                    var error = $(v).parent('div').find('.error').text(message);
                    $(this).siblings('.error').show();
               }
               error.appendTo($err_msg);
             }else{
               $(v).siblings('.error').text('')
             }
             $(v).keyup(function() {
                 $(error).fadeOut(1000, function() {
                     element.removeClass('input-error');
                });
             });
          });
        } else {
            element.addClass('input-error');
            var $err_msg = element.parent('div');
            if(element.parent('div').find('.error').length == 0) {
                  var error = $('<div class="error"></div>').text(message);
             }else{
                  element.parent('div').find('.error').text('');
                  var error = element.parent('div').find('.error').text(message);
                  $(this).siblings('.error').show();
             }
            error.appendTo($err_msg);
            element.keyup(function() {
                $(error).fadeOut(1000, function() {
                    element.removeClass('input-error');
                });
            });
        }

    };

    this.validate = function() {

        this.form.submit(function(e) {

            for (var i in Elements) {

                var type = i;
                var validation = Elements[i];
                switch (type) {
                    case 'name':
                        if (!validation.reg.test(validation.selector.val())) {
                            handleError(validation.selector, 'Not a valid name.', validation);
                        }
                        break;
                    case 'email':
                        if (!validation.reg.test(validation.selector.val())) {
                            handleError(validation.selector, 'Not a valid e-mail address.', validation);
                        }
                        break;
                    case 'message':
                        if (validation.reg.test(validation.selector.val()) || validation.selector.val() == '') {
                        handleError(validation.selector, 'Message field cannot be empty.', validation);
                        }
                        break;
                    default:
                        break;


                }

            }

            e.preventDefault();
        });

    };
};

var validator = new Validator('#test');
validator.validate();

Answer 2

我希望這是你想要實現的目標。 這花費的時間比預期的要長，但我試圖實現它。 整個表格是自定義表格。 您可以使用現有的插件來實現它。 任何方式需要花費很多時間來弄明白。 考慮一下這個問題，因為大多數事情都在起作用，如果某些事情不符合您的要求，請忽略。

 $(document).ready(function() { /* contact form validation */ var Validator = function(formObject) { this.form = $(formObject); var Elements = { name: { reg: /^[a-zA-Z ]{2,20}$/, require: true, 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.", }, gender: { error: "gender is required", }, selectOption: { error: "this field is required", required: true } }; 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); console.log(element); element.on('keypress change', function() { $(error).fadeOut(1000, function() { console.log(element); element.removeClass('input-error'); }); }); }; /* Select Option */ this.validate = function() { var errorCount = 0; this.form.find("select").each(function(index, field) { var type = $(field).data("validation"); var validation = Elements[type]; if ($(field).val() == "") { errorCount++; handleError($(field), validation.error); } }); this.form.find("input, textarea").each(function(index, field) { var type = $(field).data("validation"); var validation = Elements[type]; if (validation !== undefined) { var re = new RegExp(validation.reg); if (validation) { if (!re.test($(field).val())) { errorCount++; handleError($(field), validation.error); } } } }) /* Radio button */ var radioList = $('input:radio'); var radioNameList = new Array(); var radioUniqueNameList = new Array(); var notCompleted = 0; for (var i = 0; i < radioList.length; i++) { radioNameList.push(radioList[i].name); } radioUniqueNameList = jQuery.unique(radioNameList); console.log(radioUniqueNameList); for (var i = 0; i < radioUniqueNameList.length; i++) { var field = $('#' + radioUniqueNameList[i]); var type = field.data("validation"); var validation = Elements[type]; if ($('input[name=' + type + ']:checked', '#test').val() == undefined) { errorCount++; handleError($(field), validation.error); } } return errorCount == 0; }; }; /* Submit form*/ $(function() { $("form#test").on('submit', function(e) { var NoErrors = new Validator(this).validate(); if (NoErrors == true) { $.ajax({ url: this.action, type: this.method, data: $(this).serialize(), success: function() { // AJAX request finished, handle the results and error msg $('.success_msg').fadeIn().delay(3000).fadeOut(); $('input[type!="submit"], textarea').val('').removeClass('error'); } }); } return false; }) }) }); 

 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.0/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> <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 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>