Ich hätten nun also gerne wenn der Kunde die Felder nicht ausfüllt und trotzdem auf senden klickt, dass der Button läd und dann allerdings rot wird und ein "X" erscheint statt dem Haken.
Oder ist das jetzt zu viel verlangt
Nein, ist nicht zuviel verlangt. Weil dabei alles zusammen spielen muss, habe ich eine Testdatei angelegt. Du musst dir das Notwendige heraus ziehen und vor allem den Namen der PHP-Datei durch deinen ersetzen.
HTML
<!doctype html>
<html>
<head>
<title>Registrierung</title>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script src="http://malsup.github.com/jquery.form.js"></script>
</head>
<body>
<section class="contact" id="contact">
<div id="response"></div>
<h3>KONTAKT</h3>
<form id="myForm" method="post" action="ajaxform-blickpunkt.php">
<input type="text" name="von" placeholder="Name" class="name" /><br />
<br />
<input type="text" name="mail" placeholder="E-Mail" class="mail" /><br />
<br />
<textarea name="nachricht" placeholder="Nachricht"></textarea>
<br />
<button type="submit" id="button"></button>
</form>
</section>
<script>
// wait for the DOM to be loaded
$(document).ready(function() {
// bind 'myForm' and provide a simple callback function
$('#myForm').ajaxForm(function(output) {
$("#response").html(output);
$("#myForm")[0].reset();
if (output.indexOf("Bitte füllen Sie alle Felder aus") != -1) {
$("#button").addClass("wrong");
}
});
$( "#button" ).click(function() {
$( "#button" ).addClass( "onclic", 250, validate);
});
function validate() {
setTimeout(function() {
$( "#button" ).removeClass( "onclic" );
$( "#button" ).addClass( "validate", 450, callback );
}, 2250 );
}
function callback() {
setTimeout(function() {
$( "#button" ).removeClass( "validate wrong" );
}, 1250 );
}
});
</script>
<style>
button {
outline: none;
height: 40px;
text-align: center;
width: 130px;
border-radius: 40px;
background: #fff;
border: 2px solid #1ECD97;
color: #1ECD97;
letter-spacing: 1px;
text-shadow: 0;
font-size: 12px;
font-weight: bold;
cursor: pointer;
transition: all 0.25s ease;
}
button:hover {
color: white;
background: #1ECD97;
}
button:active {
letter-spacing: 2px;
}
button:after {
content: "SUBMIT";
}
.onclic {
width: 40px;
border-color: #bbbbbb;
border-width: 3px;
font-size: 0;
border-left-color: #1ECD97;
animation: rotating 2s 0.25s linear infinite;
}
.onclic:after {
content: "";
}
.onclic:hover {
color: #1ECD97;
background: white;
}
.validate {
font-size: 13px;
color: white;
background: #1ECD97;
}
.validate:after {
font-family: 'FontAwesome';
content: "\f00c";
}
.validate.wrong {
font-size: 13px;
color: white;
background-color: salmon !important;
border-color: red;
}
.validate.wrong:after {
font-family: 'FontAwesome';
content: "\f00d";
}
@keyframes rotating {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
</style>
</body>
</html>