How to check validation of a form?

Question

I'm new to web developing, I was trying to modify this code so it won't allow to click any of register or sign in buttons if the textareas above were empty, i'm confused where to write the if statement that will check that but i only know the basics of JS not and a little bit about jQuery ,i tried to add the following

reg-btn.click(function(e){
     if($('.pwd' ).val() == null){
     alert("error");}
     else{ .....remaining code..}

but it didn't work , Is there an way to fix that ? the original code is from:https://codepen.io/chouaibblgn45/pen/ZXKdXR?editors=1010

"use strict";
$(document).ready(function () {
    /*------- button with class register -------*/
    var reg_btn = $('.container .register');
   
    reg_btn.click(function (e) {
        e.preventDefault();
        $(this).siblings('.reg').css({
            'transform': 'translateY(40%) scale(5)',
            'border-radius': '0',
            'width': '100%',
            'height': '100%'
        }).end();
        reg_btn.siblings('.container h3:nth-of-       type(1)').css({
            'top': '40%',
            'z-index': '8',
        }).end().end();
    });
    
});

* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  font-family: 'Open Sans', sans-serif;
  background: #e2e2e2;
}

svg {
  position: fixed;
  top: 10px;
  left: 180px;
}

.container {
  position: relative;
  top: 200px;
  left: 35%;
  display: block;
  margin-bottom: 80px;
  width: 500px;
  height: 360px;
  background: #fff;
  border-radius: 5px;
  overflow: hidden;
  z-index: 1;
}

h2 {
  padding: 40px;
  font-weight: lighter;
  text-transform: uppercase;
  color: #414141;
}

input {
  display: block;
  height: 50px;
  width: 90%;
  margin: 0 auto;
  border: none;
}
input::placeholder {
  -webkit-transform: translateY(0px);
  transform: translateY(0px);
  -webkit-transition: .5s;
  transition: .5s;
}
input:hover, input:focus, input:active:focus {
  color: #ff5722;
  outline: none;
  border-bottom: 1px solid #ff5722;
}
input:hover::placeholder, input:focus::placeholder, input:active:focus::placeholder {
  color: #ff5722;
  position: relative;
  -webkit-transform: translateY(-20px);
  transform: translateY(-20px);
}

.email,
.pwd {
  position: relative;
  z-index: 1;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  padding-left: 20px;
  font-family: 'Open Sans', sans-serif;
  text-transform: uppercase;
  color: #858585;
  font-weight: lighter;
  -webkit-transition: .5s;
  transition: .5s;
}

.link {
  text-decoration: none;
  display: inline-block;
  margin: 27px 28%;
  text-transform: uppercase;
  color: #858585;
  font-weight: lighter;
  -webkit-transition: .5s;
  transition: .5s;
}

button {
  cursor: pointer;
  display: inline-block;
  float: left;
  width: 250px;
  height: 60px;
  margin-top: -10px;
  border: none;
  font-family: 'Open Sans', sans-serif;
  text-transform: uppercase;
  color: #fff;
  -webkit-transition: .5s;
  transition: .5s;
}
button:nth-of-type(1) {
  background: #673ab7;
}
button:nth-of-type(2) {
  background: #ff5722;
}
button span {
  position: absolute;
  display: block;
  margin: -10px 20%;
  -webkit-transform: translateX(0);
  transform: translateX(0);
  -webkit-transition: .5s;
  transition: .5s;
}
button:hover span {
  -webkit-transform: translateX(30px);
  transform: translateX(30px);
}

.reg {
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transform: translateY(-100%) scale(1);
  transform: translateY(-100%) scale(1);
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 50px;
  background: #673ab7;
  z-index: 5;
  -webkit-transition: .8s ease-in-out;
  transition: .8s ease-in-out;
}

h3 {
  position: absolute;
  top: -100%;
  left: 20%;
  text-transform: uppercase;
  font-weight: bolder;
  color: rgba(255, 255, 255, 0.3);
  -webkit-transition: .3s ease-in-out 1.2s;
  transition: .3s ease-in-out 1.2s;
}

<!DOCTYPE html>
<html>
  <head>
  <head>
  <body>
    
<div class="container">
  <h2>login</h2>
  <form>
    <input type="text" class="email" placeholder="email">
    <br/>
    <input type="text" class="pwd" placeholder="password">
  </form>
  <a href="#" class="link">
    forgot your password ?
  </a>
  <br/>
  <button class="register">
    <span>register</span>
  </button>
  <button class="signin">
    <span>sign in</span>
  </button>
  <h3>your registration is complete !    </h3>
  <h3>your sign in is complete !</h3>
  <div class="reg"></div>
  <div class="sig"></div>

 
 
</div>
  </body>
</html>

Did [none of these](https://stackoverflow.com/search?q=How+to+check+validation+of+a+form%3F) answer your quest6ion? — Rob, Apr 06 '20 at 14:13
Note: the `
` tag does not use and does not need a closing slash and never has in HTML. — Rob, Apr 06 '20 at 14:14
@Rd_x check out required and disabled attributes of input elements. You can add [disabled](https://www.w3schools.com/tags/att_button_disabled.asp) to your buttons to disable them temporarily and then [use javascript or jquery](https://stackoverflow.com/questions/11719961/javascript-remove-disabled-attribute-from-html-input) to enable the buttons if the text inputs are filled. If you use [required](https://www.w3schools.com/tags/att_input_required.asp), the user will have to fill the field before submitting the form. — Rachel Gallen, Apr 06 '20 at 14:34

WillD · Answer 1 · 2020-04-06T14:35:35.810

2

An empty input field's .val() will be a string with no characters in it. Not a null value.

You can see this if you run the following

console.log(typeof $('.pwd' ).val())
// returns string

You could change your code to:

reg-btn.click(function(e){
     if($('.pwd' ).val().length > 0){
        //form is valid
    }

edited Apr 06 '20 at 14:35

answered Apr 06 '20 at 14:19

WillD

5,170
6
27
56

score 1 · Accepted Answer · answered Apr 06 '20 at 14:14

Use an id rather than a class and then you want to check if the value is empty string

<input type="text" id="email" class="email" placeholder="email">
 <br/>
<input type="text" id="pwd" class="pwd" placeholder="password">

and in the JS

reg-btn.click(function(e){
 if($('#pwd' ).val() === ''||$('#email').val()===''){
 alert("Please Fill Required Fields");}
 else{ .....remaining code..}

How to check validation of a form?

2 Answers2