it-swarm.com.de

Auswahlfeld bestätigen

Ich verwende das jQuery-Plugin Validation , um ein Formular zu überprüfen. Ich habe eine Auswahlliste, die so aussieht:

<select id="select">
<option value="">Choose an option</option>
<option value="option1">Option1</option>
<option value="option2">Option2</option>
<option value="option3">Option3</option>
</select>

Jetzt möchte ich sicherstellen, dass der Benutzer etwas anderes als "Wählen Sie eine Option" auswählt (was die Standardeinstellung ist). Wenn Sie sich für die erste Option entscheiden, wird es nicht überprüft. Wie kann das gemacht werden?

51
ponjoh

Fügen Sie einfach eine Klasse der erforderlichen Klasse hinzu

<select id="select" class="required">
71
redsquare

Für den Anfang können Sie die Option deaktivieren, nicht versehentlich von Benutzern ausgewählt zu werden:

<option value="" disabled="disabled">Choose an option</option>

Führen Sie dann in Ihrem JavaScript-Ereignis (egal, ob es sich um jQuery oder um JavaScript handelt) um, ob Ihr Formular überprüft, ob es gesetzt ist:

select = document.getElementById('select'); // or in jQuery use: select = this;
if (select.value) {
  // value is set to a valid option, so submit form
  return true;
}
return false;

Oder etwas dazu.

19
Jeremy Visser

Ich weiß nicht, wie das Plugin war, als die Frage gestellt wurde (2009), aber ich hatte heute das gleiche Problem und habe es auf diese Weise gelöst:

  1. Geben Sie Ihrem select-Tag ein Namensattribut. Zum Beispiel in diesem Fall

    <select name="myselect"> 

  2. Deaktivieren Sie anstelle der Verwendung des Attributs value = "default" in der Tag-Option die von Jeremy Visser vorgeschlagene Standardoption oder set value = "".

    <option disabled="disabled">Choose...</option> 

    oder

    <option value="">Choose...</option> 

  3. Legen Sie die Plugin-Validierungsregel fest

    $( "#YOUR_FORM_ID" ).validate({ rules: { myselect: { required: true } } });

    oder

    <select name="myselect" class="required">

Obs: Die Lösung von redsquare funktioniert nur, wenn Sie nur eine Auswahl in Ihrem Formular haben. Wenn Sie möchten, dass seine Lösung mit mehr als einer Lösung arbeitet, fügen Sie Ihrer Auswahl ein Namensattribut hinzu.

Ich hoffe es hilft! :)

<select id='bookcategory' class="form-control" required="">
                    <option value="" disabled="disabled">Category</option>
                    <option value="1">LITERATURE & FICTION</option>
                    <option value="2">NON FICTION</option>
                    <option value="3">ACADEMIC</option>
            <option value="4">CHILDREN & TEENS</option>

                </select>

Die Validierung des HTML-Formulars kann vom Browser automatisch durchgeführt werden. Testen Sie den obigen Code:
Der Rest wird automatisch erledigt, es müssen keine js-Funktionen erstellt werden, nur dieses Dropdown-Menü und ein Senden-Button.

2
Gurmeet Singh

sie möchten sicherstellen, dass der Benutzer nur "Wählen Sie eine Option" auswählt (die Standardeinstellung ist). Wenn Sie sich für die erste Option entscheiden, wird es nicht überprüft. Wie kann das gemacht werden?

Sie können dies durch einfaches Hinzufügen des Attributs required = "required" im select-Tag tun. Sie können es im Code unten sehen

<select id="select" required="required">
<option value="">Choose an option</option>
<option value="option1">Option1</option>
<option value="option2">Option2</option>
<option value="option3">Option3</option>
</select>

Bei chorme, firefox und internet Explorer hat es gut funktioniert. Vielen Dank 

0
Varun Vardhan
if (select == "") {
    alert("Please select a selection");
    return false;

Das sollte für dich funktionieren. Es tat einfach für mich.

0
M. Ray

Vielleicht gibt es einen kürzeren Weg, aber das funktioniert für mich.

<script language='JavaScript' type='text/javascript'>
    function validateThisFrom(thisForm) {
        if (thisForm.FIELDNAME.value == "") {
            alert("Please make a selection");
            thisForm.FIELDNAME.focus();
            return false;
        }
        if (thisForm.FIELDNAME2.value == "") {
            alert("Please make a selection");
            thisForm.FIELDNAME2.focus();
            return false;
        }
    }
</script>
<form onSubmit="return validateThisFrom (this);">
    <select name="FIELDNAME" class="form-control">
        <option value="">- select -</option>
        <option value="value 1">Visible info of Value 1</option>
        <option value="value 2">Visible info of Value 2</option>
    </select>
    <select name="FIELDNAME2" class="form-control">
        <option value="">- select -</option>
        <option value="value 1">Visible info of Value 1</option>
        <option value="value 2">Visible info of Value 2</option>
    </select>
</form>
0
Marina