jQuery check if <input> exists and has a value

后端 未结 7 778
情歌与酒
情歌与酒 2021-02-01 00:07

I have the following example:


Is there a way to check if this element exists and ha

相关标签:
7条回答
  • 2021-02-01 00:44
    if($('#user_inp').length > 0 && $('#user_inp').val() != '')
    {
    
        $('#user_inp').css({"font-size":"18px"});
        $('#user_line').css({"background-color":"#4cae4c","transition":"0.5s","height":"2px"});
        $('#username').css({"color":"#4cae4c","transition":"0.5s","font-size":"18px"});
    
    }
    
    0 讨论(0)
  • 2021-02-01 00:48

    I would do something like this: $('input[value]').something . This finds all inputs that have value and operates something onto them.

    0 讨论(0)
  • 2021-02-01 00:53

    Just for the heck of it, I tracked this down in the jQuery code. The .val() function currently starts at line 165 of attributes.js. Here's the relevant section, with my 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;
        }
    

    So, you'll either get undefined or "" or null -- all of which evaluate as false in if statements.

    0 讨论(0)
  • 2021-02-01 00:54

    You can create your own custom selector :hasValue and then use that to find, filter, or test any other jQuery elements.

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

    Then you can find elements like this:

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

    Or test the current element with .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>

    Further Reading:

    • Make jQuery :contains Case-Insensitive
    • Make Your Own Custom jQuery Selector
    • Exploring jQuery Selectors, Part 3
    0 讨论(0)
  • 2021-02-01 00:56

    You could do:

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

    length evaluates to false in a condition, when the value is 0.

    0 讨论(0)
  • 2021-02-01 01:10

    The input won't have a value if it doesn't exist. Try this...

    if($('.input1').val())
    
    0 讨论(0)
提交回复
热议问题