Wie kann ich diesen HTML Vorgang stoppen?

Ich würde gerne einen HTML-Vorgang stoppen, wenn eine Voraussetzung in Java Skript nicht erfüllt ist:

Ich arbeite mit formsubmit.co und kann auf meiner Webseite nicht mit PHP arbeiten. Bis jetzt habe folgenden Code:

<form action="https://formsubmit.co/email@gutefrage.de" method="post" onsubmit="validateEmail()">
    <input type="hidden" name="_autoresponse" value=
    "Hallo, du hast diese Email bekommen. " />
    <input type="hidden" name="_next" value="https://www.gutefrage.net/" /> 
    <input type="email" id="email" name="email" placeholder="Email Address" /> 
    <label class="container"><input type="checkbox" required/>Ich habe die Nutzungsbedinungen gelesen.</label> 
    <button type="submit">Send</button>
</form>


<script>
/* <![CDATA[ */
      function validateEmail() {
        const email = document.getElementById("email").value;
        if (email.includes("200") && email.includes("Frage") && email.length >= 20) {
          alert("Valid email address.");
          return true;
        } else {
          alert("Invalid email address.");
          return false;
        }
      }
/*]]>*/
</script>

Das Skript überprüft die Eingabe der E-Mail Adresse, sofern alle Felder eingegeben sind und das Formular abgesendet wurde, ob die eingegebene E-Mail-Adresse "100", "Frage" und grösser oder gleich 20 Zeichen lang ist. Auf einer Nachricht im Browser wird angezeigt, ob die E-Mail-Adresse den Voraussetzungen entspricht oder nicht. Anschließend wird die Nachricht "Hallo, du hast diese E-Mail bekommen." an die eingegebene E-Mail-Adresse gesendet (das übernimmt formsubmit.co). Anschließend wird der Nutzer auf Gute Frage weitergeleitet.

Beides Funktioniert einwandfrei, jedoch wird, egal ob die E-Mail die Voraussetzungen erfüllt oder nicht, an die angegebene E-Mail gesendet.

Meine Frage ist, ob ich die Aktion in HTML irgendwie stoppen kann, also das die E-Mail nicht versendet wird, wenn sie die Voraussetzungen in JavaScript nicht erfüllt. Dabei kann ich keine riesigen Änderungen am gegebenen HTML-Code von formsubmit unternehmen (da dies ja immer noch funktionieren sollte) und ohne PHP oder ähnliches.

Edit: Das mit der Erkennung funktioniert irgendwie auch nicht, es zeigt immer an, dass die Email die Voraussetzungen nicht erfüllt. Ich habe jedoch ein Beispiel, wo dies funktioniert:

<form onsubmit="return validateEmail()" method="post">
    <label for="email">Email:</label> <input type="email" id="email" name="email" placeholder="z.B. ichbincool@email.com" size="40" required="" /> <input type="submit" value="senden" required="" />
</form>
<script>
/* <![CDATA[ */
      function validateEmail() {
        const email = document.getElementById("email").value;
        if (email.includes("ich") && email.includes("cool") && email.length >= 5) {
          alert("Valid email address.");
          return true;
        } else {
          alert("Invalid email address.");
          return false;
        }
      }
/*]]>*/
</script>

1 Antwort

Vom Fragesteller als hilfreich ausgezeichnet

BeamerBen

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

programmieren

16.02.2023, 17:24

Du kannst das submit event nutzen um zu verhindern, dass das Formular abgesendet wird wenn es nicht valide ist.

Außerdem gibt es eine API um in die Formvalidierung des Browsers einzugreifen, du kannst auch einfach für einfache Fälle die nativen Möglichkeiten des Browsers nutzen indem du den type des inputs auf email setzt. Dann prüft der Browser selber ob der Input eine Emailadresse ist.

mehr findest du auch hier:

https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation

Woher ich das weiß:Berufserfahrung – Software Entwickler / Devops

Ähnliche Fragen

HTML Form auswerten und neue Füllen?

Hey!

Ich habe folgende Input form:

        <form action="/calculate" method="GET">
            <br><label for="KM_cost_truck_a">KM cost truck a</label>
            <input required placeholder="10" ype="text" id="KM_cost_truck_a" name="KM_cost_truck_a"><br>
    
            <label for="KM_cost_truck_b">KM cost truck b</label>
            <input required placeholder="9" type="text" id="KM_cost_truck_b" name="KM_cost_truck_b"><br>
    
            <label for="Product_cost_a">Product cost a</label>
            <input required placeholder="7" type="text" id="Product_cost_a" name="Product_cost_a"><br>
    
            <label for="Product_cost_b">Product cost b</label>
            <input required placeholder="11" type="text" id="Product_cost_b" name="Product_cost_b"><br>
    
            <label for="Source_a_location">Source a location</label>
            <input required placeholder="Berlin" type="text" id="Source_a_location" name="Source_a_location"><br>
    
            <label for="Source_b_location">Source b location</label>
            <input required placeholder="Paris" type="text" id="Source_b_location" name="Source_b_location"><br>
    
            <label for="Truck_a_capacity">Source a capacity</label>
            <input required placeholder="5" type="text" id="Truck_a_capacity" name="Truck_a_capacity"><br>
    
            <label for="Truck_b_capacity">Source b capacity</label>
            <input required placeholder="3" type="text" id="Truck_b_capacity" name="Truck_b_capacity"><br>


            <button type="submit" id="calcbtn" value="Submit">Calculate</button>
        </form>

Die eine Anfrage an meinen Server schickt und die ergebnisse dann auf eine neue Seite kommen. (Man wirt weitergeleitet)

Wie kann ich eine neue form mit der Antwort vom server füllen?

...zur Frage

wieso PHP Parse error: syntax error, unexpected token ";" in /home/emmanuel/Downloads/hp.php on line 11?

<link rel="stylesheet" href="style.css">
<?php
$db = unserialize(file_get_contents('data.php'));
if($db == false){
        $db = array();
}
if($_POST['mail'] == ''){
        if($_POST['name'] == ''){
                if($_POST['pass'] == ''){a
                        if(!array_key_exists($_POST['mail'], $db){
                                $db[$_POST['mail']] = [$_POST['name'], []];
                                file_put_contents('data.php', serialize($db));
                        } 
                }
        }
}
?>
<form action="" method="post">
    <center>
        <label for="firma_name" >name:</label><br>
        <input type="text" class="input" name="name" autocomplete="off"><br>
        <label for="produkte">email:</label><br>
        <input type="text"  class="input" name="mail" autocomplete="off"><br>
        <label for="adresse">pass:</label><br>
        <input type="text"  class="input" name="pass" autocomplete="off"><br>
        <input type="submit" class="anmelde_button" value="anmelden">
    </center>
</form>

wieso PHP Parse error: syntax error, unexpected token ";" in /home/emmanuel/Downloads/hp.php on line 11?

...zur Frage

Wie kann ich mit JavaScript eine einfache Validierung umsetzen?

Hallo zusammne,

ich möchte gerne, dass wenn man in das Inputfield vom Typ email etwas eingibt, eine alert-Funktion aufgerufen wird. Die Funktion soll erst aufgerufen werden, wenn in das Eingabefeld vom Typ email fünf Zeichen eingegben worden sind.

Beispiele:

Maxmu (hier sollte das alert aufgerufen werden) stermann@muster.com, wäre richtig.
ds@d, wäre falsch, da nur vier Zeichen eingegeben worden sind und die Funktion sollte nicht aufgerufen werden.

Hier das Codebeispiel.

HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="Stylesheet" href="style.css">
    <script src="Übungen.js"></script>
  </head>
  <body>
    <form>
      <label for Anmelden>Anmelden</label>
      <input type="email" name="Anmelden" id="Anmelden">
      <label for Password>Password</label>
      <input type="password" name="Password" id="Passwort">
      <button type="button" onclick="Einloggen()">Anmelden</button>
    </form>
  </body>
</html>

JavaScript:

const Anmeldedaten = document.getElementById("Anmelden").innerHTML;

function Einloggen() {
  if (Anmeldedaten.length > 5) {
    alert("Es hat geklappt!");
  }
}

Ich bedanke mich im Voraus bei euch. :)

...zur Frage

Html Passwort?

Guten Tag ich bin dabei eine seite zu programmieren auf welcher man einen key eingeben muss und dann weiter geleitet wird jedoch stoße ich hirbei auf probleme und zwar ist das passwort schon automatisch eingegeben und man kann eingeben was man will man wird trotzdem weitergeleitet wie kann ich das beheben hier der code :

<!DOCTYPE html>
<html>
<body>
<h1>Key</h1>
<form action="/action_page.php">
 <label for="key">Key:</label>
 <input type="password" id="key" name="key" value="1234"><br><br>
 <input type="submit" value="Submit">
</form>
<p>Click the "Submit" button and the form-data will be sent to a page on the 
server called "hier kommt noch ein link".</p>
</body>
</html>

...zur Frage

Wieso versendet dieser PHP Code die Mail nicht?

Gestern ging es noch.....

Es kommt zwar die Meldung das die Mail verschickt wurde jedoch wurde sie nicht verschickt

<?php
if(isset($_POST['submit'])) {
  $to = $_POST['to'];
  $subject = $_POST['subject'];
  $message = $_POST['message'];
  $header = "From : <//email-adresse-vom-sender>";
  if(mail($to, $subject, $message, $header)) {
    echo "Email sent successfully";
  } else {
    echo "Email failled";
  }
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div class="container">
  <div class="form_container">
    <h3>Send Email with PHP</h3>
    <form method="post">
      <p>
        <label for="to">To:</label>
        <input type="text" name="to" placeholder="To.."/>
      </p>
      <p>
        <label for="subject">Subject:</label>
        <input type="text" name="subject" placeholder="Subject.."/>
      </p>
      <p>
        <label for="name">Message:</label>
        <input type="text" name="message" placeholder="Message.."/>
      </p>
      <button name="submit" name='submit'>Send</button>
    </form>
    </div>
    </div>
  
</body>
</html>

...zur Frage

Javascript - getElementById funktioniert nicht?

Hey alle zusammen, kann mir jemand sagen, wieso auf der Konsole nicht "123" ausgegeben wird?

echo "</head><body style=\"font-family: Verdana;\">";
echo "<script type = 'text/JavaScript'>console.log('geht los:');console.log(document.getElementById('scannerInput').value);</script>";
echo "<input type=\"text\" id=\"scannerInput\" value=\"123\" />";

...zur Frage

HTML Formular automatische email?

Hallo, ich habe ein Formular in HTML gecodet. Unten ist ein Button, der zum abschicken des Formulars dient.

Ganz unten im "Form"-tag steht folgendes:

Oben als Attribut von <form> steht folgendes:

method="post" action="mailto:(hier steht meine Email)"

Jetzt zum Problem:

Wenn man auf abschicken drückt, öffnet sich das Mail-Programm auf dem Laptop, es soll aber automatisch die Mail gesendet werden (nur mit den Werten).

Wie kann ich das umsetzen?

...zur Frage

Einfacher Taschenrechner JS?

Hallo :)

Ich soll einen einfachen Taschenrechner mit Eingabefeldern erstellen, so dass er am Ende wie im Bild aussieht, ich weiß nur nicht, wie ich den <script> Teil schreiben muss, sodass er auch tatsächlich funktioniert, kann mir da jemand weiterhelfen?

Hier noch mein bisheriger Code:

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Praktikum Webanwendungen 1</title>
    <style>
      input,
      button {
        margin: 10px;
      }
    </style>
    <script>
     
    </script>
  </head>
  <body>
    <h1>Taschenrechner</h1>
    <label for="number1">Zahl1:</label>
    <input id="number1" type="number">


    <label for="number2">Zahl2:</label>
    <input id="number2" type="number">


    <div>
      <button onclick="add()">+</button>
      <button onclick="subtract()">-</button>
      <button onclick="multiply()">x</button>
      <button onclick="divide()">/</button>
    </div>


    <label for="result">Ergebnis:</label>
    <input id="result" type="number">
  </body>
</html>

...zur Frage

Html und Javascritp Gif ein und ausblenden lassen?

Ich möchte mit Html und Javascript ein Gif per button einfügen lassen. Ich habe schon einiges ausprobiert aber es funktioniert nicht, ich würde mich gerne über Hilfe freuen. (Die Aufgabe war es einen Kopfrechentrainer zu programmieren, als Zusatz ein Bild einfügen,...)

<html>
	<head>
		<title> Kopfrechentrainer Ultimate </title>
	</head>
	<body>
<script language=javascript>


{	var a;
	var b;
	var c;
	var d;
	var f=0;
	var r=0;
	var x;
}	
	function random()
	
{
	a=Math.floor(Math.random()*90)+10;
	document.rechnen.eingabe1.value=a;
	
	b=Math.floor(Math.random()*9)+1;
	document.rechnen.eingabe2.value=b;	
}


	function kontrolle()
{
	c=document.rechnen.vergleich.value;
	if(a*b==c){r++;document.rechnen.richtig.value=""+r}
	if(a*b!=c){f++;document.rechnen.falsch.value=""+f}


	if(r+f==50)
{
	if(r==0){alert('soos')}
	else if(0<r<=10){alert('saas')}
	else if(10<r<=20){alert('sees')}
	else if(20<r<=30){alert('siis')}
	else if(30<r<=40){alert('suus')}
	else if(40<r<=50){alert('fiif')}
}


}
	function zurück()
{
	document.rechnen.richtig.value=""
	document.rechnen.falsch.value=""
}


	function shutdown()
{
	window.open('https://www.youtube.com/watch?v=dQw4w9WgXcQ');
}


	function bka()
{
   	var audio = new Audio('sirene.mp3');
   	audio.play();


	document.getElementById("bkaf").style.display="none";
}


</script>








	
		<font color ="red"> <h2 align = center>  Kopfrechentrainer Ultimate </h2> </font>
		<br>
		<p align = center> <b>  
		Du kannst hier Multiplikationsaufgaben üben. <br>
		Beim Klicken auf den Button werden dir dir nacheinander 50 Aufgaben gestellt.
		</p> </b>
		<br>
		<br>
		<h1 align = center> Bereit? </h1>
		<br>
	<form name="rechnen">
		<input type=button value="Start" onclick=random()>
		<br> <br>
		<INPUT type=text name=eingabe1 value=""> *
		<INPUT type=text name=eingabe2 value=""> =
		<INPUT type=text name=vergleich value="">
		
			<input type=button value="Kontrolle" onclick=kontrolle()>
			<input type=button value="Zurücksetzen" onclick=zurück()>
				
		<br> <br> 
	<p align = center> <b>
		Richtig gelöst Falsch gelöst
	</b> 
		<br> <br>
		<INPUT type=text name=richtig value=""> 
		<INPUT type=text name=falsch value="">
	<br> <br>
		<input type=button value="shutdown" onclick=shutdown()>
	<br> <br>
		<input type=button value="BKA Modus" onclick=bka()>
		
		<audio autoplay>
 		 <source src="sirene.mp3" type="audio/mpeg">
		</audio>
		<br>
	<div id="bkaf">
	<img id="blaulicht" src="blaulicht.gif">	
	</div>


	</form>










	</body>
</html>

...zur Frage

HTML input in JavaScript-Variable?

Wenn ich in HTML ein form ausfülle und abschicke wie bekomme ich dann das eingegeben im Input in eine JavaScript Variable. Habe provisorisch mal das hier gemacht und komme nicht weiter. Danke für eure Hilfe :)

<!DOCTYPE html>

<html>

<head>

<title>Input to Variable</title>

var input = "Wie bekomme ich den eingegebenen input hier hin?"

</script>

</head>

<body>

<button>Submit</button>

</body>

</html>

...zur Frage

Plausibilitätsprüfung als jQuery Code?

Benötige für eine Ausgabe eine Plausibilitätsprüfung als jQuery Code um ein Alter zu überprüfen, bzw. einzutippen: Unter Geburtsdatum tippen man das Datum ein, und bei Jahr_Einrichtung soll man ein Alter (Zahl) eintippen, die zum Datum übereinstimmt.

Das heißt, wenn man ein Datum 23.06.2020 eintippt, kann man nur Zahlen von 1 bis 3 eintippen, ansonsten kommt es zu eine Fehlermeldung

<label for="Geburtsdatum"style="width:165px;">Geburtsdatum</label>
<input type="text" class="form-control" style="width: 129px;" style="max-width: 130px;" id="Geburtsdatum" name="Geburtsdatum" value="{if $pdf}{$values.Geburtsdatum}{/if}">
                                                    
                                                              
<label for="Jahr_Einrichtung" style="width: 120px;">Das Kind besucht seit</label>
input type="text" class="form-control" maxlength="2" style="width: 30px;"  name="Jahr_Einrichtung" value="{if $pdf}{$values.Jahr_Einrichtung}{/if}">

...zur Frage

Checkboxen die Pflicht sein soll?

man soll umbedigt eines der Checkboxen auswählen, Bei Bedarf oder Regelmäßig oder Nein.

<div class="col-xs-2">{if $pdf}<span class="span-checkbox{if isset($values.Medikamente_in_Schule_Bei_Bedarf)} span-checkbox-checked{/if}"></span>{else}<label class="checkbox-inline"><input type="checkbox" data-group="Medikamente_Schule" name="Medikamente_in_Schule_Bei_Bedarf" value="Ja">{/if} {language key="elf_Frage_11_Bei_Bedarf"}{if !$pdf}</label>{/if}</div>       

<div class="col-xs-2">{if $pdf}<span class="span-checkbox{if isset($values.Medikamente_in_Schule_Regelmaessig)} span-checkbox-checked{/if}"></span>{else}<label class="checkbox-inline"><input type="checkbox" data-group="Medikamente_Schule" name="Medikamente_in_Schule_Regelmaessig" value="Ja">{/if} {language key="elf_Frage_11_Regelmaeßig"}{if !$pdf}</label>{/if}</div>

<div class="col-xs-2">{if $pdf}<span class="span-checkbox{if isset($values.Medikamente_in_Schule_Nein)} span-checkbox-checked{/if}"></span>{else}<label class="checkbox-inline"><input type="checkbox" data-group="Medikamente_Schule" name="Medikamente_in_Schule_Nein" value="Ja">{/if} {language key="elf_Frage_11_Nein"}{if !$pdf}</label>{/if}</div>

...zur Frage

HTML Kontaktformular per PHP an Mail senden?

Hallo, ich hab ein Kontaktformular in HTML erstellt bei dem man auch Dateien hochladen kann. Ich hab es auch schon so eingestellt dass alle Daten (Antworten) an mich per Mail gesendet werden, allerdings schaffe ich es nicht dass auch die Dateien als Anhang in der Mail mit gesendet werden, kann mir dabei jemand helfen?

Hier mein Code:

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="style.css" type="text/css">
    <title>NAME | Kontakt</title>
    <meta charset="utf-8">
   </head>
   <body>
    <div id="wrapper">
      <header><a href="index.html"><img src="bilder/logo vorschau.png" alt="Das Logo konnte nicht geladen werden!"></a></header>


      <nav>
        <ul>
          <li><a href="index.html">Home</a></li>
          <li><a href="ueber.html">Über</a></li>
          <li><a href="kontakt.html"><b>Kontakt</b></a></li>
        </ul>
      </nav>


      <section>
        <div id="kontaktformular">
          <h1>Wie können wir dir helfen?</h1>
          <?php
          if(isset($_POST["submit"])){
            mail("reinhard.habisohn@icloud.com", "Kontaktformular von ".$_POST["name"], 'Name: '.$_POST["name"].' ||  Email: '.$_POST["email"].' ||  Telefonnummer: '.$_POST["telefon"].' ||  Priorität: '.$_POST["priorität"].' ||  Betreff: '.$_POST["betreff"].' ||  Nachricht: '.$_POST["message"]);
            ?>
            <em><h1 style="color: green;">Deine Anfrage wurde erfolgreich versendet!</h1><a>(Die Antwort senden wir dir an die angegebene E-Mail Adresse!)</a></em>
            <?php
          }
           ?>
          <form action="index.php" method="post" enctype="multipart/form-data">
            <br><label>Name:</label><br>
            <input type="text" name="name" required><br>
            <br><label>E-Mail:</label><br>
            <input type="email" name="email" required><br>
            <br><label>Telefonnummer (optional):</label><br>
            <input type="number" name="telefon"><br>
            <br><label>Wichtigkeit:</label><br>
            <select name="priorität" required>
              <option value"gering">Gering</option>
              <option value"mittel">Mittel</option>
              <option value"hoch">Hoch</option>
            </select><br>
            <br><label>Betreff:</label><br>
            <input type="text" name="betreff" required><br>
            <br><label>Nachricht:</label><br>
            <textarea rows="7" name="message" required></textarea><br>
            <br><label>Anhang (optional):</label><br>
            <input type="file" name="datei[]" multiple><br>
            <br><button type="submit" name="submit">Absenden</button>
          </form>
        </div>
      </section>
    </div>
  </body>   
</html>

Vielen Dank im Vorhinein!

...zur Frage

HTML Taschenrechner?

Hey ich habe einen HTML Taschenrechner von einer Website kopiert von einer Website und ich will jetzt den Taschenrechner so programmieren das er nicht über hundert rechen kann bzw. Eine Fehler Meldung dann kommt so das immer ein Fehler kommt wenn ich über hundert rechnen tun ich hab schon im Internet mich belesen aber finde nix leider vielleicht könnt ihr mir helfen

<html>
<head>
<title>HTML-Taschenrechner </title>
</head>
<body bgcolor= "# 000000" text= "gold">
<form name="calculator" >
<input type="button" value="1" onClick="document.calculator.ans.value+='1'">
<input type="button" value="2" onClick="document.calculator.ans.value+='2'">
<input type="button" value="3" onClick="document.calculator.ans.value+='3'">
<input type="button" value="+" onClick="document.calculator.ans.value+='+'">
<input type="button" value="4" onClick="document.calculator.ans.value+='4'">
<input type="button" value="5" onClick="document.calculator.ans.value+='5'">
<input type="button" value="6" onClick="document.calculator.ans.value+='6'">
<input type="button" value="-" onClick="document.calculator.ans.value+='-'">
<input type="button" value="7" onClick="document.calculator.ans.value+='7'">
<input type="button" value="8" onClick="document.calculator.ans.value+='8'">
<input type="button" value="9" onClick="document.calculator.ans.value+='9'">
<input type="button" value="*" onClick="document.calculator.ans.value+='*'">
<input type="button" value="/" onClick="document.calculator.ans.value+='/'">
<input type="button" value="0" onClick="document.calculator.ans.value+='0'">
<input type="reset" value="Reset">
<input type="button" value="=" onClick="document.calculator.ans.value=eval(document.calculator.ans.value)">
Solution is
<input type="textfield" name="ans" value="">
</form>
</body>
</html>

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen