Eingabe Text-Validierung mit jQuery

Question

Ich habe eine Situation, in der ich den Text validiert in ein Eingabe-Textfeld eingegeben haben möchte. Dies ist der HTML-Code:

<div id="err_title" style="display:none;">Please enter a valid Number.</div> 
<input type="radio" id="txt_a-radio" value="valueA" checked="checked"> 
<input type="text" id="txt_a"> 
<input type="radio" id="txt_b-radio" value="valueB"> 
<input type="text" id="txt_b" disabled> 

standardmäßig #txt_b Feld wird deaktiviert, wenn der Benutzer klickt auf # txt_b-Optionsfeld #txt_b aktiviert wird und #txt_a deaktiviert.

Die Bedingung für die Validierung ist:

#txt_a can contain only 12 digit number 
#txt_b can contain only 20 digit number 

Validierung passieren soll, wenn Benutzer Wert in aktiviert Feld tritt dann irgendwo außerhalb klickt. Wenn der vom Benutzer eingegebene Wert nicht gültig ist, sollte die Fehlermeldung #err_title angezeigt werden.

Angenommen, der Benutzer gibt den Wert für #txt_a ein und klickt dann auf die # txt_b-Optionsschaltfläche. Die Validierung sollte nicht stattfinden, da der Benutzer das Eingabefeld gewechselt hat. In diesem Fall sollte #txt_a deaktiviert und txt_b aktiviert sein.

Ich habe mit dem folgenden Code versucht:

$('#txt_a').change(function() { 
    custNumber = $('#txt_a').val(); expression = /^[0-9]{12}$/; 
    if(custNumber === '') { 
     $("#err_title").css('display', 'none'); 
    } else if ((!custNumber.match(regexp))) { 
     $("#err_title").css('display', 'block'); 
    } else { 
     $("#err_title").css('display', 'none'); 
    } 
}); 

Answer 1

$input1 = $('input[name="input1"]'); 
 
$input2 = $('input[name="input2"]'); 
 
$checkbox = $('input[name="checkbox"]'); 
 
    
 

 
$input1.on('change', function(e) { 
 
    var isValid = this.value.length >= 12; 
 
    
 
    this.classList.toggle('notValid', !isValid); 
 
}) 
 

 
$checkbox.on('change', function(e) { 
 
    $input2.prop('disabled', !this.checked); 
 
})

input.notValid { 
 
    border: 1px solid red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="text" name="input1" /> 
 
<input type="text" name="input2" disabled /> 
 
<input type="checkbox" name="checkbox" />

HINWEIS: Im Beispiel oben, ich bin Mischen vanillia JS, mit jQuery. Ich würde empfehlen, es zu vermeiden - ich habe das getan, um Ihnen zu zeigen, wie einfach (naja, nicht immer ...) es ist, so eine einfache Sache ohne jQuery zu machen. Grundsätzlich, wenn Sie solche einfachen Dinge tun möchten, würde ich empfehlen, auf jQuery aufzugeben.

ANTWORT:

Sie suchen jQuery change Ereignis. Es löst einmal den losen Fokus aus.

$(your_input).on('change', function(e) {...})

Sie können Eingabelänge wie (Funktion innerhalb Hörer) bestätigen:

var isValid = this.value.length === 12

Das gleiche gilt für deaktiviert/aktiviert Eingang. Sie haben Ereignis-Listener heften sich an Checkbox

$(your_checkbox).on('change', function(e) {...})

dann können Sie Zustand der Checkbox erhalten:

var isChecked = this.checked

und aktivieren/deaktivieren Sie Ihre Eingabe

$(your_input).attr('disabled', !isChecked)