Form input js-check

Check your Form Inputs via Js

by Wolf Wortmann

HTML

<h1>Mail me</h1>
<form action="http://wolf.wolfgang-m.de/mailer.php" method="post">
      
    <label>Name *</label><input type="text" name="name" id="name"/><br>
    <label>E-Mail *</label><input type="mail" name="mail" id="mail"/><br>
    <label>Message *</label><textarea name="msg" cols="50" rows="5" id="text"></textarea><br>
      <p><input type="submit" value="Daten absenden" onclick="return checkInput()" />
        <input type="reset"></p>
    </form>
    * required!

CSS

body{
    background-color:  #242424;
}
h1{
    color: #FFF;
}
label{
    color: #FFF;
    padding-right: 20px;
    
}
textarea{
  margin-bottom: 20px;
  margin-top: 10px;
  padding: 4px;
  width: 228px;
  border-style:solid;
}
input{
  margin-bottom: 10px;
  margin-top: 10px;
  padding: 4px;
}
input[type="text"],input[type="mail"],input[type="sub"],textarea{
    box-shadow:2px 2px 2px #000000 inset, -2px -2px 2px 0px #000000, 2px 2px 2px 2px #000000;
    border-width: 0px;
}
input[type="submit"]{
    border:none;
    padding:4px 8px 4px 8px;
    text-align:center;
    font-size:15px;
    background:#F0F0F0;
    color:#000000;
    border-radius:4px;
    box-shadow:1px 1px 2px 0px #FFFFFF inset,
    2px 2px 3px 0px #000000;
}
input[type="submit"]:hover{
    color: #59CEE5;
    text-shadow: 0px 2px 7px #000000;
    transition: color 0.3s ease 0.2s,text-shadow 0.4s ease 0.1s;
}
input[type="submit"]:active{
    border-radius:4px;
    box-shadow:1px 1px 1px 0px #454545 inset,
    1px 1px 1px 0px #000000;
}
input[type="reset"]{
    border:none;
    padding:4px 8px 4px 8px;
    text-align:center;
    font-size:10px;
    background:#F0F0F0;
    color:#000000;
    border-radius:4px;
    box-shadow:1px 1px 2px 0px #FFFFFF inset,
    2px 2px 3px 0px #000000;
}
input[type="reset"]:hover{
    color: #59CEE5;
    text-shadow: 2px 2px 10px #000000;
    transition: color 0.3s ease 0.2s,text-shadow 0.4s ease 0.1s;
}
input[type="reset"]:active{
    border-radius:4px;
    box-shadow:1px 1px 1px 0px #454545 inset,
    1px 1px 1px 0px #000000;
}

JavaScript

//thanks @basiii  for the code! :)
function checkInput(){
    var ret = true;
    var name = document.getElementById("name");
    var mail = document.getElementById("mail");
    var text = document.getElementById("text");
    var re = new RegExp("[a-z0-9!#$%&'*+/=?^_{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?");

    // prüfe namen
    if(name.value == "") {
        $("input[type='text']").css({ "box-shadow":"-2px -2px 10px 0px red, 1px 1px 10px -2px red"});
        //$("input[type='text']").css({ "background-color":"red"});
      ret = false;
    } else {
        //$("input[type='text']").css({ "background-color":"green"});
        $("input[type='text']").css({ "box-shadow":"-2px -2px 10px 0px green, 1px 1px 10px -2px green"});
    }
    // prüfe mail
      if(re.test(mail.value) == false){
          //$("input[type='mail']").css({ "background-color":"red"});
          $("input[type='mail']").css({ "box-shadow":"-2px -2px 10px 0px red, 1px 1px 10px -2px red"});
      ret = false;
    } else {
        //$("input[type='mail']").css({ "background-color":"green"});
        $("input[type='mail']").css({ "box-shadow":"-2px -2px 10px 0px green, 1px 1px 10px -2px green"});
    }

   // prüfe text
    if(text.value == "") {
        $("textarea").css({ "box-shadow":"-2px -2px 10px 0px red, 1px 1px 10px -2px red"});
        //$("textarea").css({ "background-color":"red";});
        //$("textarea").css({ "border-width":"2px"});
        //$("textarea").css({ "border-color":"red"});//box-shadow:2px 2px 3px #000000 inset, -2px -2px 3px 0px #000000, 2px 2px 3px 3px #000000;
      ret = false;
    } else {
        //$("textarea").css({ "background-color":"green"});
        $("textarea").css({ "box-shadow":"-2px -2px 10px 0px green, 1px 1px 10px -2px green"});
    }

    return ret;
  }