JSFiddle - React, Tailwind, and code Playground
HTML
<!doctype html>
<html lang="de" dir="ltr">
<head>
<meta charset="UTF-8" />
<title>Simple jQuery Validation</title>
</head>
<body>
<form id="simpleform" method="get" action="script.php">
<input type="text" name="phone" placeholder="Telefon" />
<input type="text" name="email" placeholder="E-Mail" />
<input type="submit" value="Speichern"></input>
</form>
</body>
</html>
CSS
@charset "UTF-8";
* { margin: 0 ; padding: 0 ; border: 0 none ; }
body { padding: 10px ; }
input { padding: 10px ; font: 14px arial ; border: 1px solid #c0c0c0 ; }
input:focus { border: 1px solid #000 ; }
[type="submit"]:hover { cursor: pointer ; background-color: #f7f7f7 ; }
.invalid { border: 1px solid #84392B ; }
JavaScript
// the document is ready
$( document ).ready( function( ) {
// handle the form's submit-event
$( '#simpleform' ).submit( function( e ) {
var phoneIsEmpty = ! $.trim( $( '[name="phone"]' ).val( ) ) ;
var emailIsEmpty = ! $.trim( $( '[name="email"]' ).val( ) ) ;
if( phoneIsEmpty && emailIsEmpty ) {
alert( 'Bitte eine Telefonnummer oder eine E-Mail Adresse eintrage, damit wir Sie kontaktieren können.' ) ;
e.preventDefault( ) ;
}
} ) ;
} ) ;