What is the best way to do form validation before submitting

Question

Please some one suggest me on,

What is the best way to do form validation before submitting?

Actual scenario is like, i have a button called save,so when user press save button.

I need to validate the data and pass the flow to server to store the data in the tables.

Instead of doing form data validation in server side, is there any possible way to check those in client side itself

<form>
    <header>
        <h1>Testing </h1>
    </header>
    <p>
        Receipt number:
        <input type="text" id="grn" class="tb1" onkeypress="return isNumber(event)" /> Type
        <select name="evalu" id="evalu">
            <option value="electrical">Electrical</option>
            <option value="mechanical">Mechanical</option>
        </select>
        cad
        <select name="cd" id="cd">
            <option value="unit1">xv</option>
            <option value="unit2">ed</option>
        </select>
        <input type="button" id="find" value="Find" class="button0" />
        <br>
        <br> Report No
        <input type="text" name="irepno" id="irepno" class="tb1" maxlength="8" /> date
        <input type="text" name="idt" id="idt" class="tb1" value="<%= new SimpleDateFormat(" dd-MM-yyyy ").format(new java.util.Date())%>">
        <input type="button" id="search" value="Search" class="button0" />
        <br></br>
        <input type="button" value="Save the record" id="saverecord" class="button0">
    </p>
</form>

Answer 1

Javascript itself is developed with an intention to add client side processing of data and validations.

The best way depends on the situation where you are applying and also the javascript technologies.

If you are not using any specific client side technologies or frameworks for example angularjs or emberjs etc.

You can try using jquery validation plugin which is avialable ate https://jqueryvalidation.org/

$(function() {
  // Initialize form validation on the registration form.
  // It has the name attribute "registration"
  $("form[name='registration']").validate({
    // Specify validation rules
    rules: {
      // The key name on the left side is the name attribute
      // of an input field. Validation rules are defined
      // on the right side
      firstname: "required",
      lastname: "required",
      email: {
        required: true,
        // Specify that email should be validated
        // by the built-in "email" rule
        email: true
      },
      password: {
        required: true,
        minlength: 5
      }
    },
    // Specify validation error messages
    messages: {
      firstname: "Please enter your firstname",
      lastname: "Please enter your lastname",
      password: {
        required: "Please provide a password",
        minlength: "Your password must be at least 5 characters long"
      },
      email: "Please enter a valid email address"
    },
    // Make sure the form is submitted to the destination defined
    // in the "action" attribute of the form when valid
    submitHandler: function(form) {
      form.submit();
    }
  });
});

label,
input {
  display: block;
}
input{
 margin-bottom:15px;
}
label.error {
  color: red;
  margin-top:-10px;
  margin-bottom:15px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.min.js"></script>

<div class="container">
  <h2>Registration</h2>
  <form action="" name="registration">

    <label for="firstname">First Name</label>
    <input type="text" name="firstname" id="firstname" placeholder="John" />

    <label for="lastname">Last Name</label>
    <input type="text" name="lastname" id="lastname" placeholder="Doe" />

    <label for="email">Email</label>
    <input type="email" name="email" id="email" placeholder="[email protected]" />

    <label for="password">Password</label>
    <input type="password" name="password" id="password" placeholder="&#9679;&#9679;&#9679;&#9679;&#9679;" />

    <button type="submit">Register</button>

  </form>
</div>

Answer 2

There are many ways to validate a form. I prefer validating a form using HTML elements which is a quick way to check the input details.

Here is a code snippet I used to validate details entered by the client in a simple form.

<fieldset>
    <legend>Enter Your Details</legend>
    <p>
        <label for="fave"> Mobile:
            <input maxlength="10" autofocus="on" autocomplete="on" name="mobile" placeholder="Mobile number"/>
        </label>
    </p>

    <p>
        <label for="name"> Name:
            <input maxlength="30" pattern="^.* .*$" required size="15" name="name" placeholder="Your name"/>
        </label>
    </p>

    <p>
        <label for="password"> Password:
            <input type="password" required name="password" placeholder="Min 6 characters"/>
        </label>
    </p>

    <p>
        <label for="email">
            Email: <input type="email" pattern=".*@mydomain.com$" placeholder="[email protected]" id="email" name="email"/>
        </label>
    </p>
    <p>
        <label for="tel">
            Tel: <input type="tel" placeholder="(XXX)-XXX-XXXX" id="tel" name="tel"/>
        </label>
    </p>
    <p>
        <label for="url">
            Your homepage: <input type="url" id="url" name="url"/>
        </label>
    </p>
</fieldset>

Few elements like type, maxlength, pattern, required, size are used for validating a form in client side.

I like the book The Definitive Guide to HTML5, where you can learn to validate a form using front-end development.

Hope this solves your problem.