jQuery vérifie si <input> existe et a une valeur

Question

J'ai l'exemple suivant :

<input type="text" class="input1" value="bla"/>

Existe-t-il un moyen de vérifier si cet élément existe et a une valeur en une seule déclaration ? Ou, au moins, quelque chose de plus court que

if($('.input1').length > 0 && $('input1').val() != '')

Je commence à être frustré par les conditions qui s'étendent sur des kilomètres.

Answer 1

L'entrée n'aura pas de valeur si elle n'existe pas. Essayez ceci...

if($('.input1').val())

Answer 2

Vous pouvez le faire :

if($('.input1').length && $('.input1').val().length)

length s'évalue à false dans une condition, lorsque la valeur est 0 .

Answer 3

Vous pouvez faire quelque chose comme ça :

jQuery.fn.existsWithValue = function() { 
    return this.length && this.val().length; 
}

if ($(selector).existsWithValue()) {
        // Do something
}

Answer 4

Juste pour le plaisir, j'ai trouvé cela dans le code de jQuery. La fonction .val() commence actuellement à la ligne 165 de attributs.js . Voici la section concernée, avec mes annotations :

val: function( value ) {
    var hooks, ret, isFunction,
        elem = this[0];

        /// NO ARGUMENTS, BECAUSE NOT SETTING VALUE
    if ( !arguments.length ) {

        /// IF NOT DEFINED, THIS BLOCK IS NOT ENTERED. HENCE 'UNDEFINED'
        if ( elem ) {
            hooks = jQuery.valHooks[ elem.type ] || jQuery.valHooks[ elem.nodeName.toLowerCase() ];

            if ( hooks && "get" in hooks && (ret = hooks.get( elem, "value" )) !== undefined ) {
                return ret;
            }

            ret = elem.value;

            /// IF IS DEFINED, JQUERY WILL CHECK TYPE AND RETURN APPROPRIATE 'EMPTY' VALUE
            return typeof ret === "string" ?
                // handle most common string cases
                ret.replace(rreturn, "") :
                // handle cases where value is null/undef or number
                ret == null ? "" : ret;
        }

        return;
    }

Ainsi, vous obtiendrez soit undefined o "" o null -- qui sont toutes évaluées comme fausses dans les instructions if.

Answer 5

Vous pouvez créer votre propre sélecteur personnalisé :hasValue et l'utiliser ensuite pour trouver, filtrer ou tester d'autres éléments jQuery.

jQuery.expr[':'].hasValue = function(el,index,match) {
  return el.value != "";
};

Vous pouvez alors trouver des éléments comme celui-ci :

var data = $("form input:hasValue").serialize();

Ou tester l'élément courant avec .is()

var elHasValue = $("#name").is(":hasValue");

jQuery.expr[':'].hasValue = function(el) {
  return el.value != "";
};

var data = $("form input:hasValue").serialize();
console.log(data)

var elHasValue = $("[name='LastName']").is(":hasValue");
console.log(elHasValue)

label { display: block; margin-top:10px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form>
  <label>
    First Name:
    <input type="text" name="FirstName" value="Frida" />
  </label>

  <label>
    Last Name:
    <input type="text" name="LastName" />
  </label>
</form>

Pour en savoir plus :

• Faire de jQuery :contains Insensible à la casse
• Créez votre propre sélecteur jQuery personnalisé
• Explorer les sélecteurs jQuery, partie 3