Ich habe ein Grundformular mit mehreren Feldern, die ich vor dem Absenden des Codes validieren möchte. Wenn ich jedoch die Formulardaten an js übergebe, heißt es, dass die Felder null sind. Hilfe bitte? Ich bin neu bei JS, bitte haben Sie etwas Geduld mit mir. Das entsprechende Formular. Es gibt eine Schaltfläche zum Umschalten der Formularanzeige, aber ich glaube nicht, dass dies Auswirkungen darauf hat.

<div id = "new_bk" style="display: none;">
    <form id = "New_Book" onsubmit = "javscript: return(FormValidate());">
        Book Name:<br>
        <input type="text" name="book_name">

        <br>
        Author name:<br>
        <input type="text" name="author_name">

        <br>
        ISBN:<br>
        <input type="text" name="ISBN">

        <br>
        Release Date:<br>
        <input type="text" name="release_date">

        <br>
        Price:<br>
        <input type="text" name="price">

        <br>
        Stock:<br>
        <input type="text" name="stock">

        <br>
        Sold:<br>
        <input type="text" name="sold">

        <br>
        Restock amount:<br>
        <input type="text" name="restock">

        <br>
        Rating:<br>
        <input type="text" name="rating">

        <br>
        Reviews:<br>
        <input type="text" name="reviews">

        <br>
        <input type="submit" value="Submit">
    </form>
</div>

Und die js

function FormValidate(){
    // if(document.getElementById("book_name").value.length>0){
    //     alert("ok");
    // }else{
    //     alert("not ok");
    // }
    alert("Name is: "  + document.getElementById('book_name').value);
    if(document.New_Book.book_name.value == ""){
        alert("sdkg");
        return false;
    }
    return true;
}

Dies löst jedoch nicht die Warnmeldung aus. und wenn ich es umschalte

alert(document.getElementById('book_name'));

Es gibt mir eine Null.

Jede Hilfe wäre sehr dankbar. Oh und falls das wichtig ist. Das js befindet sich in einer externen Datei, auf die am Ende des Body-Tags der HTML-Datei verwiesen wird.

UPDATE

Das Formular sendet die Daten jetzt korrekt. aber jetzt passiert etwas Seltsames.

alert("1");

if(document.New_Book.book_name.value == ''){
    alert("Input book name please");
    return false;
}

alert("2");

Dieses Codesegment löst nur eine Warnung ("1") aus und endet dann. Weder die Fehlerszenario-Warnung noch die Warnung ("2") werden ausgelöst. irgendwelche Ideen warum?

0
Irtza.QC 7 Aug. 2015 im 20:33

4 Antworten

Beste Antwort

Für diesen Code:

alert(document.getElementById('book_name'));

Beachten Sie, dass das Textfeld kein ID-Attribut enthält, auf das Sie abzielen möchten.

<input type="text" name="book_name">

Ändern Sie diese Option, um ein ID-Attribut hinzuzufügen:

<input type="text" id="book_name" name="book_name">

Und es wird funktionieren.

3
Brian Mains 7 Aug. 2015 im 17:35

Sie versuchen, ein Element anhand seines ID zu erhalten, haben jedoch keine IDs für Ihre Elemente festgelegt, sodass Sie es hinzufügen müssen

<input type="text" name="book_name" id="book_name">

Ich halte es jedoch für klüger, alle Eingänge auf einmal auszuwählen und sie dann zur Validierung zu durchlaufen. Sie können dies mit querySelectorAll tun, zum Beispiel:

var allInputs = document.querySelectorAll('form > input');
for (var i = 0; i<allInputs.length;i++) {
    if (allInputs[i].value == ''){ 
        alert(allInputs[i].getAttribute('name') + ' is not filled');
    }
}
0
baao 7 Aug. 2015 im 17:40

Ändern Sie Ihren Code in document.getElementByName('book_name') oder wenn Sie nach ID auswählen möchten, sollte HTML folgendermaßen aussehen: <input type="text" id="book_name">

Element nach Namensattribut abrufen: document.getElementByName('book_name') Referenz: http://www.w3schools.com/jsref/met_doc_getelementsbyname.asp

Element nach ID-Attribut abrufen: document.getElementById('book_name') Referenz: http://www.w3schools.com/jsref/met_document_getelementbyid.asp

0
Tatarin 7 Aug. 2015 im 17:41

Dort ist das Formular "Name" aufgeführt - das ist besser für PHP. Wenn Sie es an der ID abrufen, müssen Sie id = "[Ihr Wert hier]" angeben, damit es funktioniert. Fügen Sie Ihren Tags ein zusätzliches Feld hinzu

1
Katie 7 Aug. 2015 im 17:50