Öğe öğesini seçin ve jquery

Question

Bu, Jquery adding and removing elements dynamically numaralı soruya verilen bir soru. Seçme öğesinde yalnızca "öğe seçildiğinde" seçildiğinde, öğeyi seçmek için hiçbir şey seçilmediyse bu öğeyi seçiyorum.

HTML

<input data-required="true" type="text" name="foo" /> 
<select data-required="true" > 
    <option value=""></option> 
    <option value="volvo">Volvo</option> 
    <option value="saab">Saab</option> 
    <option value="mercedes">Mercedes</option> 
    <option value="audi">Audi</option> 
</select> 

jquery

$("input[data-required='true'],select[data-required='true']").focus(function() { 

    $(this).after('<span class="label_error">This field is required</span>'); 

}).blur(function() { 
    $(this).next('span').remove(); 
}).keyup(function() { 
    if ($(this).val().length > 0) { 
    $(this).next('span').remove(); 
    } else { 
    $(this).after('<span class="label_error">This field is required</span>'); 
    } 
}); 

css

input[data-required='true'] { 
    background-color: white; 
    /* transparent may work here too */ 
} 

input[data-required='true']:focus { 
    background-color: red; 
} 

span.label_error { 
    color: red; 
    font-size: 10pt; 
} 

Answer 1

ayarlayabilir for özniteliği, requiredinput type="text" ayarlanmış öznitelik, select öğesiyle html<label> eleman kullanabilirsiniz; css:focus, :invalid, :not(), :checked, :first-child sözde seçiciler, bu kullanarak değiştirme olayı işleyicisi gibi yanıt tökezledi +

[data-required]:focus:invalid + [for] { 
 
    color: red; 
 
    font-size: 10pt; 
 
    color: red; 
 
    display: inline-block; 
 
    left: 50px; 
 
} 
 
.label_error, 
 
[data-required]:focus:not(:checked) option:first-child, 
 
[data-required]:not(:focus) + [for] { 
 
    display: none; 
 
}

<form> 
 
    <input data-required="true" type="text" name="foo" id="foo" value="" required /> 
 
    <label for="foo" class="label_error">This field is required</label> 
 
    <br> 
 
    <select data-required="true" name="car" id="car" required> 
 
    <option></option> 
 
    <option value="volvo">Volvo</option> 
 
    <option value="saab">Saab</option> 
 
    <option value="mercedes">Mercedes</option> 
 
    <option value="audi">Audi</option> 
 
    </select> 
 
    <label for="car" class="label_error">This field is required</label> 
 
</form>

Answer 2

sadece bir girdi olduğu gibi, seçilmiş bir listede() .val kullanabilirsiniz

:

if($(this).val()=="") 
    $(this).after('<span class="label_error">This field is required</span>'); 

Answer 3

Sadece javascript'i değiştirdim.

$("input[data-required='true']").focus(function() { 
 
    $(this).after('<span class="label_error">This field is required</span>'); 
 
}).blur(function() { 
 
    $(this).next('span').remove(); 
 
}).keyup(function() { 
 
    if ($(this).val().length > 0) { 
 
    $(this).next('span').remove(); 
 
    } else { 
 
    $(this).after('<span class="label_error">This field is required</span>'); 
 
    } 
 
}); 
 

 
$("select").change(function() { 
 
    if ($(this).val() !== "") { 
 
    $(this).next("span").remove(); 
 
    } 
 
}) 
 

 
$("select").focus(function() { 
 
    $(this).next("span").remove(); 
 
    if ($(this).val() === "") { 
 
    $(this).after('<span class="label_error">This field is required</span>'); 
 
    } 
 
}) 
 

 
$("select").blur(function() { 
 
    $(this).next("span").remove(); 
 
})

input[data-required='true'] { 
 
    background-color: white; 
 
    /* transparent may work here too */ 
 
} 
 

 
input[data-required='true']:focus { 
 
    background-color: red; 
 
} 
 

 
span.label_error { 
 
    color: red; 
 
    font-size: 10pt; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input data-required="true" type="text" name="foo" /> 
 
<select data-required="true" > 
 
    <option value=""></option> 
 
    <option value="volvo">Volvo</option> 
 
    <option value="saab">Saab</option> 
 
    <option value="mercedes">Mercedes</option> 
 
    <option value="audi">Audi</option> 
 
</select>

Answer 4

bitişik kardeş seçici. sadece javascript değiştirdi. Bu sorunun [Meta tartışma için yükseltilmiş] olduğunu

$("input[data-required='true'],select[data-required='true']").focus(function() { 

    $(this).after('<span class="label_error">This field is required</span>'); 

}).blur(function() { 
    $(this).next('span').remove(); 
}).change(function() { 
    if ($(this).val().length > 0) { 
    $(this).next('span').remove(); 
    } else { 
    $(this).after('<span class="label_error">This field is required</span>'); 
    } 
}).keyup(function() { 
    if ($(this).val().length > 0) { 
    $(this).next('span').remove(); 
    } else { 
    $(this).after('<span class="label_error">This field is required</span>'); 
    } 
});