選擇元素和jquery

-1

這是一個跟進問題到Jquery adding and removing elements dynamically。我想顯示「此字段是必需的」選擇元素旁邊只有當沒有選擇任何東西時，如選擇元素中的值=「」，我該怎麼做？選擇元素和jquery

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; 
}

來源

2016-03-26 rampantNinja

注意，這個問題已經被[上調梅塔討論]（https://meta.stackoverflow.com/questions/319801/unclear-what-youre-asking-close-vote-without-comment）由你的回答者之一。 – halfer

您可以使用html<label>元素與for屬性集，required屬性設置爲input type="text"，select元素; css:focus，:invalid，:not()，:checked，:first-child僞選擇，相鄰的兄弟選擇+

[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>

來源

2016-03-26 02:42:35 guest271314

您可以選擇列表上使用.VAL（），就像輸入：

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

來源

2016-03-26 01:01:28 David784

我只更改了javascript。

$("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>

來源

2016-03-26 02:21:46 John

我偶然到像這樣使用更改事件處理程序的答案。只是改變了JavaScript。

$("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>'); 
    } 
});

來源

2016-03-26 05:58:27 rampantNinja

在回覆您的評論*「謝謝我將刪除這個問題，我認爲堆棧不喜歡刪除問題，這就是爲什麼我沒有」*，垃圾問題，一個微不足道的印刷錯誤的問題，或像你這樣的問題由一個愚蠢的錯誤引起，*被*一直刪除。只刪除對未來讀者有用的問題，特別是如果他們有有用的答案，就會被忽略。 – robinCTS

選擇元素和jquery

回答

相關問題