検証入力最小 - 最大の単語

Question

var validateForm = (function() { 
 
    var options = {}; 
 
    var classError = 'error'; 
 

 
    var showFieldValidation = function(input, inputIsValid) { 
 
    if (!inputIsValid) { 
 
     if (!input.parentNode.className || input.parentNode.className.indexOf(options.classError) == -1) { 
 
     input.parentNode.className += ' ' + options.classError 
 

 
     } 
 
    } else { 
 
     var regError = new RegExp('(\\s|^)' + options.classError + '(\\s|$)'); 
 
     input.parentNode.className = input.parentNode.className.replace(regError, ''); 
 

 
    } 
 
    }; 
 

 
    var testInputText = function(input) { 
 
    var fieldHasError = false; 
 
    var mailReg = new RegExp('^[0-9a-zA-Z_.-]', 'gi'); 
 

 
    if (!mailReg.test(input.value)) { 
 
     showFieldValidation(input, false); 
 
     return false; 
 
    } else { 
 
     showFieldValidation(input, true); 
 
     return true; 
 
    } 
 
    };; 
 

 
    var prepareElements = function() { 
 
    var elements = options.form.querySelectorAll('input[required]'); 
 

 
    [].forEach.call(elements, function(element) { 
 
     element.removeAttribute('required'); 
 
     element.className += ' required'; 
 

 
     if (element.nodeName.toUpperCase() == 'INPUT') { 
 
     var type = element.type.toUpperCase(); 
 

 
     if (type == 'TEXT') { 
 
      element.addEventListener('keyup', function() { 
 
      testInputText(element) 
 
      }); 
 
      element.addEventListener('blur', function() { 
 
      testInputText(element) 
 
      }); 
 
     } 
 

 
     } 
 

 
    }); 
 
    }; 
 
    var formSubmit = function() { 
 
    options.form.addEventListener('submit', function(e) { 
 
     e.preventDefault(); 
 

 
     var validated = true; 
 

 
     //pobieramy wszystkie pola, którym wcześniej ustawiliśmy klasę .required 
 
     var elements = options.form.querySelectorAll('.required'); 
 

 
     //podobne działanie już robiliśmy przy przygotowywaniu pól 
 
     [].forEach.call(elements, function(element) { 
 
     if (element.nodeName.toUpperCase() == 'INPUT') { 
 
      var type = element.type.toUpperCase(); 
 

 
      if (type == 'TEXT') { 
 
      if (!testInputText(element)) validated = false; 
 
      } 
 

 
     } 
 
     }); 
 

 
     if (validated) { 
 
     this.submit(); 
 
     } else { 
 
     return false; 
 
     } 
 
    }); 
 
    }; 
 

 
    var init = function(_options) { 
 
    //do naszego modulu bedziemy przekazywac opcje 
 
    options = { 
 
     form: _options.form || null, 
 
     classError: _options.classError || 'error' 
 

 
    } 
 
    if (options.form == null || options.form == undefined || options.form.length == 0) { 
 
     console.warn('validateForm: bad form'); 
 
     return false; 
 
    } 
 
    prepareElements(); 
 
    formSubmit(); 
 
    }; 
 

 
    return { 
 
    init: init 
 
    } 
 
})(); 
 

 
document.addEventListener("DOMContentLoaded", function() { 
 
    var form = document.querySelector('.form'); 
 
    validateForm.init({ 
 
    form: form 
 
    }) 
 
});

input[type=text].as_tags_in_l67:focus { 
 
    outline-style: none; 
 
} 
 
.form .error input[type=text] { 
 
    color: #DB083E; 
 
    border-color: #DB083E; 
 
    box-shadow: 0 0 2px 2px red; 
 
}

<form class="form"> 
 
    <div class="ask_con_area67"> 
 

 
    <div id="til_bo_x43"> 
 
     <label class="til_l67">Title</label> 
 
     <input class="til_l67_text" type="text" autocomplete="off" required/> 
 
    </div> 
 

 
    </div> 
 
</form>

こんにちは、 は、私は、例えば次の入力にいくつかのテキストを表示するために自分のコードを変更することができますどのように一つの質問を持っています'分5文字を追加する必要があります'？検証ではmin-lengthを5文字、100文字でmax-lengthを追加する方法は？

Answer 1

属性セレクタの値がcssの場合、エンクロージャは引用符で囲まれている必要があります。

input[type=text] 

は、cssの有効な属性セレクタではありません。

あなたは <input type="text">要素で RegExp ^[0-9a-zA-Z_.-]{5,100}で html5 pattern属性を使用することができます

input[type="text"] 

と交換し、

を表示する<input>要素のidに設定for属性値を持つ<label>要素は '分5つの文字を追加する必要があります'

css:after疑似要素content:invalid,:valid疑似クラスを使用します。 minlengthため

代替は、data-min-length重複data-*ためmaxlength属性は、_任意の5つの文字は、有効な入力です " '5分の文字を追加する必要があります'" _

input[type="text"].til_l67_text:invalid + [for="til_167"] { 
 
    color: red; 
 
} 
 
input[type="text"].til_l67_text:valid + [for="til_167"] { 
 
    display: none; 
 
} 
 
label[for="til_167"]:after { 
 
    content: "'should add min 5 characters'"; 
 
}

<form class="form"> 
 
    <div class="ask_con_area67"> 
 

 
    <div id="til_bo_x43"> 
 
     <label class="til_l67">Title</label> 
 
     <input class="til_l67_text" 
 
      id="til_167" 
 
      type="text" 
 
      minlength="5" 
 
      maxlength="100" 
 
      autocomplete="off" 
 
      pattern="^[0-9a-zA-Z_.-]{5,100}" 
 
      required/> 
 
     <label for="til_167"></label> 
 
    </div> 
 

 
    </div> 
 
</form>