Verificați dacă intrările sunt goale folosind jQuery
Am o forma pe care am dori ca toate câmpurile să fie completate. Dacă un câmp este apăsat și apoi completat, aș dori pentru a afișa un fundal roșu.
Aici este codul meu:
$('#apply-form input').blur(function () {
if ($('input:text').is(":empty")) {
$(this).parents('p').addClass('warning');
}
});Acesta se aplică la avertizare clasa, indiferent de domeniu fiind completat sau nu.
Ce fac gresit?
$('#apply-form input').blur(function()
{
if( !$(this).val() ) {
$(this).parents('p').addClass('warning');
}
});Și tu nu't neapărat nevoie.lungimea sau vezi daca's >0 deoarece un șir gol evaluează la false, oricum, dar dacă te'd place să pentru lizibilitate scopuri:
$('#apply-form input').blur(function()
{
if( $(this).val().length === 0 ) {
$(this).parents('p').addClass('warning');
}
});Daca're sigur că va funcționa întotdeauna pe un textfield element atunci puteți folosi doar asta.valoarea`.
$('#apply-form input').blur(function()
{
if( !this.value ) {
$(this).parents('p').addClass('warning');
}
});De asemenea, ar trebui să ia act de faptul că $('intrare:text') apucă de mai multe elemente, specificați un context sau de a folosi "această" cheie dacă vrei doar o referire la un singur element (cu condiția să nu's un textfield în contextul's descendenții/copii).
Toată lumea are dreptate, dar îmi place să fiu un pic mai explicit și tăiați valori.
$('#apply-form input').blur(function() {
if(!$.trim(this.value).length) { // zero-length string AFTER a trim
$(this).parents('p').addClass('warning');
}
});dacă nu folosiți .lungime , apoi o intrare de '0' poate fi catalogat ca prost, și o intrare de 5 spații ar putea fi marcat ca bine fără $.trim . Cel mai bun de Noroc.
O faci pe blur este prea limitat. Se presupune că a existat accent pe forma de teren, așa că am prefera să-l facă pe submit, și harta prin intrare. După ani de zile de-a face cu lux de estompare, concentra, etc. trucuri, păstrând lucrurile simple va aduce mai mult gradul de utilizare în cazul în care contează.
$('#signupform').submit(function() {
var errors = 0;
$("#signupform :input").map(function(){
if( !$(this).val() ) {
$(this).parents('td').addClass('warning');
errors++;
} else if ($(this).val()) {
$(this).parents('td').removeClass('warning');
}
});
if(errors > 0){
$('#errorwarn').text("All fields are required");
return false;
}
// do the ajax..
});
if ($('input:text').val().length == 0) {
$(this).parents('p').addClass('warning');
}
puteți folosi, de asemenea,..
$('#apply-form input').blur(function()
{
if( $(this).val() == '' ) {
$(this).parents('p').addClass('warning');
}
});dacă aveți dubii despre spații,apoi încercați..
$('#apply-form input').blur(function()
{
if( $(this).val().trim() == '' ) {
$(this).parents('p').addClass('warning');
}
});
cum de nimeni nu a menționat
$(this).filter('[value=]').addClass('warning');pare mai jquery-ca să-mi
La evenimentul keyup va detecta daca utilizatorul a șters cutie la fel de bine (de exemplu, backspace ridică la eveniment, dar backspace nu ridica apăsare de tastă eveniment în IE)
$("#inputname").keyup(function() {
if (!this.value) {
alert('The box is empty');
}});
Luați în considerare utilizarea jQuery validare plugin în loc. Acesta poate fi ușor exagerat pentru simplu câmpurile obligatorii, dar suficient de mature care se ocupă de cazuri de margine ai't chiar gândit încă (și nici nu ar fi de noi, până când ne-am întâlnit cu ei).
Puteți eticheta câmpurile necesare cu o clasă de "necesar", a alerga o $('forma').valida() in $(document).gata (de) și că's e nevoie.
L's chiar găzduit pe Microsoft CDN prea, pentru livrare rapidă: http://www.asp.net/ajaxlibrary/CDN.ashx
Există un alt lucru pe care ați putea dori să se gândească, în Prezent, se poate adăuga numai la avertizare clasă cazul în care este gol, cum despre eliminarea clasei din nou atunci când formularul nu este gol deloc.
astfel:
$('#apply-form input').blur(function()
{
if( !$(this).val() ) {
$(this).parents('p').addClass('warning');
} else if ($(this).val()) {
$(this).parents('p').removeClass('warning');
}
});
A :empty pseudo-selector este folosit pentru a vedea dacă un element conține niciun copil, ar trebui să verificați valoarea :
$('#apply-form input').blur(function() {
if(!this.value) { // zero-length string
$(this).parents('p').addClass('warning');
}
});
Aici este un exemplu folosind keyup de intrare selectat. Se foloseste o garnitura la fel de bine să vă asigurați că o secvență de doar un spațiu alb de caractere nu't declanșa un răspuns sinceră. Acesta este un exemplu care poate fi folosit pentru a începe o căutare cutie sau ceva legat de acest tip de funcționalitate.
YourObjNameSpace.yourJqueryInputElement.keyup(function (e){
if($.trim($(this).val())){
// trimmed value is truthy meaning real characters are entered
}else{
// trimmed value is falsey meaning empty input excluding just whitespace characters
}
}
$(function() {
var fields = $('#search_form').serializeArray();
is_blank = true;
for (var i = 0; i < fields.length; i++) {
// excluded fields
if ((fields[i].name != "locale") && (fields[i].name != "utf8")) {
if (fields[i].value) {
is_blank = false;
}
}
}
if (is_blank) {
$('#filters-button').append(': OFF');
}
else {
$('#filters-button').append(': ON');
}
});Verificați dacă toate câmpurile sunt goale și adăugați ON sau OFF pe Filter_button
Poti incerca ceva de genul asta:
$('#apply-form input[value!=""]').blur(function() {
$(this).parents('p').addClass('warning');
});Se va aplica .blur() eveniment numai pentru intrări cu valorile goale.
Mare colecție de răspunsuri, ar dori să adaug că, de asemenea, puteți face acest lucru folosind :substituent-a arătat selector CSS. Un pic mai curat pentru a utiliza OMI, mai ales daca're deja folosind jQ și au substituenți pe intrări dumneavoastră.
if ($('input#cust-descrip').is(':placeholder-shown')) {
console.log('Empty');
}
$('input#cust-descrip').on('blur', '', function(ev) {
if (!$('input#cust-descrip').is(':placeholder-shown')) {
console.log('Has Text!');
}
else {
console.log('Empty!');
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" class="form-control" id="cust-descrip" autocomplete="off" placeholder="Description">De asemenea, puteți face uz de :valid "și": invalid selectoare dacă aveți intrări care sunt necesare. Puteți folosi aceste selectoare dacă utilizați atributul necesar, pe o intrare.
