jQuery toggleClass example

regex jquery register

by Dedi Wibisono

HTML

<input type="text" class="mail" placeholder="mail">
<input type="text" class="name" placeholder="name">
<small class="error">SALAH</small>
<input type="text" class="phone" placeholder="phone number">
<button id="submit">submit</button>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}
.error {
  display: none;
}
.show {
  display:block !important
}
#banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

#banner-message.alt {
  background: #0084ff;
  color: #fff;
  margin-top: 40px;
  width: 200px;
}

#banner-message.alt button {
  background: #fff;
  color: #000;
}

JavaScript

$("#submit").click(function(){
		var VAL = $(".mail").val();
    var email = /^\b[A-Z0-9._%-]+@[A-Z0-9.-]+\.[A-Z]{2,4}\b$/i;
    var name_ = $(".name").val();
    var name_reg = /^[a-zA-Z ]+$/;
    
    var phone = $(".phone").val();
    var phone_reg = /\(?([0-9]{3})\)?([ .-]?)([0-9]{3})\2([0-9]{4})/;
    
    
		//email.test(VAL) && 
    if (email.test(VAL) && name_reg.test(name_) && phone_reg.test(phone)) {
        alert('Great, you entered an E-Mail-address');
    } else {
    	alert('data salah')
    }
})

$(".name").keyup(function(){
    var name_ = $(".name").val();
    var name_reg = /^[a-zA-Z ]+$/;
    if (!name_reg.test(name_)) {
    	$(".error").addClass("show")
    }
})