提交之前进行表单验证的最佳方法是什么

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="john@doe.com" /> <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="user@domain.com" 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.

Answer 3

On form submit, write javascript or jquery script to validate and pass form values to your servlets.

you can use this jquery plugin too.

Answer 4

There are some great validation libraries out there. One I like in particular is jQuery.validate.js as it is well documented and easy to use.

If you would prefer to write your own, a good place to start would be this W3Schools article on Javascript form validation

Answer 5

I suggest you to options, you can choose yourself:

1) Write your validate code inside the function when you click saverecord button.

2) Validate input field (in your case I guess that "Receipt number" and "Report No" is only number), you can write function to handle onkeypress ( or onchange) event to validate which typing from users.