Eingabeüberprüfung einbauen

[easy65]

Hallo, wiedermal.
Also ich habe meine vorherige Frage gelöst, aber dadurch sind neue Probleme entstanden.
Ich habe 4 Eingabefelder und einen Button "ADD"
Wenn ich auf ADD klicke, wird eine JavaScript Funktion ausgeführt, die alle EIngaben liest und in meine Tabelle einträgt. Ich will aber, dass z.B eine korrekte Email Adresse eingetragen wird, bevor alles in die Tabelle eingetragen wird. Hab da schon einiges probiert aber es ging nichts, ich glaube mein Code ist "komisch" aufgebaut. Könnt ihr mal reinschauen?

<button onclick="addRow()">Add</button>

To-Do:   
<button onclick="addRow()">Add</button>

<input type="text" name="To-Do" id="To-Do" /><br />
Email
<input type="email" name="email" id="email" /><br />


<table id="myTable">
  <tr>
    <th>To-Do</th>
    <th>Priorität</th>
   <th>Anzahl</th>
    <th>Erstellt am</th>
    <th>Gültig bis</th>
    <th>Email Adresse</th>

  </tr>
<tr>
    <td>Milch kaufen</td>
    <td>Mittel</td>
    <td>5</td>
    <td>18.11.2019</td>
    <td>18.11.2020</td>
    <td>[email protected]</td>
    <td><input type="button" value="Delete" onclick="deleteRow(this)"/></td>


<script>
function addRow() {


    var table = document.getElementById("myTable");
  
    var row= document.createElement("tr");
    console.log(row);
    var td1 = document.createElement("td");
    var td2 = document.createElement("td");
    var td3 = document.createElement("td");   
    var td4 = document.createElement("td");   
    var td5= document.createElement("td");
    var td6= document.createElement("td");
  
  


    td1.innerHTML = document.getElementById("To-Do").value;
    td2.innerHTML = document.getElementById("Priorität").value;
    td3.innerHTML  = document.getElementById("Anzahl").value;
    td4.innerHTML  = document.getElementById("bis").value;
    td5.innerHTML  = document.getElementById("bis").value;
    td6.innerHTML  = document.getElementById("email").value;
  

    row.appendChild(td1);
    row.appendChild(td2);
    row.appendChild(td3);
    row.appendChild(td4);
    row.appendChild(td5);
    row.appendChild(td6);

    table.children[0].appendChild(row);   
}
</script>

 

[LeCub]

Du könntest entweder eine Bibliothek wie http://validatorjs.org nutzen, um den vom User eingegebenen String zu prüfen oder selber eine Funktion bauen, die das eingegebene mithilfe von z.B search auf Zeichen wie "@" oder "." überprüft. Dafür kannst du dir ja mal folgenden Artikel durchlesen: https://www.mediaevent.de/javascript/Javascript-String-Methoden.html

 

[SpiceLab]

@easy65 Wenn Du ein Problem mit Deinem JavaScript-Code hast, richte Deine Frage bitte an das Fachforum.

Oder gehst Du etwa auch zum Bäcker, wenn's wieder an der Zeit ist, die Haare schneiden zu lassen?

Das ist heute schon der zweite Thread, den ich Dir vom HTML-Forum hinterher tragen durfte, und wäre Dir dankbar, wenn's der Letze war - nicht nur für heute! :)

 

[LeCub]

PS: Ich sehe gerade, dass es bei HTML5 auch einen input vom Typ "email" gibt.

Wäre aber in seinem Fall nicht zu empfehlen, da die Korrektheit des Input bei Absenden des dazugehörigen Formulars geschieht.
In diesem Fall wird aber Clientseitig eine Funktion aufgerufen, die auch funktioniert, wenn keine Email eingegeben wurde.

 

[LeCub]

Siehe z.B. sowas: https://jsfiddle.net/Lecub/gc8khfun/ (ist ziemlich vereinfacht). Du kannst auch eine nicht gültige Email eintragen und trotzdem die Funktion starten, wobei der Hinweis auf das falsche Format des eingegebenen erst danach gezeigt wird, da dann das Formular abgeschickt wird.

 

[LeCub]

Dann ist es jetzt wohl am TE, sich einen Lösungsweg auszusuchen :)