How to check input using javascript

Question

<script type="text/javascript"> function validate() { if (document.form.price.value.trim() === "") { alert("Please enter a price"); document.form.price.focus(); return false; } if (document.form.price.value !== "") { if (! (/^\d*(?:\.\d{0,2})?$/.test(document.form.price.value))) { alert("Please enter a valid price"); document.form.price.focus(); return false; } } return true; } </script> <form action="" method="post" name="form" id="form" onsubmit="return validate(this);"> <input name="price" type="text" class="r2" /> <input name="price2" type="text" class="r2" /> <input name="price3" type="text" class="r2" /> <input name="price4" type="text" class="r2" /> <input name="price5" type="text" class="r2" /> ...more.... <input name="price50" type="text" class="r2" /> 

This javascript code works great to check the price field.

Question:

How to make the code work like a global check? Example: it will check the price, price2, price3, price4, price5, etc. With one function. Please let me know:)

Answer 1

My personal recommendation would be something like this:

 <script type="text/javascript"> function validate() { return [ document.form.price, document.form.price2, document.form.price3, document.form.price4, document.form.price5 ].every(validatePrice) } function validatePrice(price) { if (price.value.trim() === "") { alert("Please enter a price"); price.focus(); return false; } if (price.value !== "") { if (! (/^\d*(?:\.\d{0,2})?$/.test(price.value))) { alert("Please enter a valid price"); price.focus(); return false; } } return true; } </script> 

Answer 2

If you do not plan to use jQuery, this should work.

 function validate() { for (var field in document.getElementsByTagName('input')) { if (isPriceField(field)) { field.value = field.value.trim(); if (isNaN(parseFloat(field.value))) { return alertAndFocus(field, "Please enter a valid price"); } } } return true; } function isPriceField(field) { return (field.name.substr(0, Math.min(5, field.name.length)) === 'price') } function alertAndFocus(field, message) { alert(message); field.focus(); return false; } 

Answer 3

 $('#form input').each(function(){ console.log('valid',$(this)[0].validity.valid); }); 

Answer 4

The easiest in this case is to really use jQuery. That way you can use a common selector and apply validation to all elements.

 $("#price*").each(function() {//Do your validation here $(this) is the item price, then price2 then price3}) 

For anything else, you will need to request the DOM, and then this will not work the same in all browsers.

Today you cannot do anything in Javascript and ignore something like jQuery http://docs.jquery.com/ or Scriptalicious.

Answer 5

I use jsFormValidator to validate my form and it works like a charm. You do not need to add strong syntax to your HTML tags, for example:

  <input type="text" name="username" placeholder="Username" data-validate/> 

You simply create a basic JSON object to describe how you want to validate your form:

 { "email": { "validEmail":true, "required":true }, "username": { "minLength":5, "maxLength":15 }, "password": { "validPassword":true, "match": "password", "required":true } 

}

And then you just check the whole form with a single line of code:

  jsFormValidator.App.create().Validator.applyRules('Login'); //Magic! 

Answer 6

You can check all 5 prices and return true only if all 5 comply with your checking rules.

Answer 7

jQuery Form Validator is a multi-functional and multilingual jQuery plugin that makes it easy to validate user input while keeping HTML markup clean from JavaScript code.

Although this plugin has a wide range of validation features, it is designed to consume as little jQuery network traffic as possible. This is achieved by combining the validation functions into "modules", which allows you to load only those functions that are necessary to validate a specific form.

  <form action="/registration" method="POST"> <p> User name (4 characters minimum, only alphanumeric characters): <input data-validation="length alphanumeric" data-validation-length="min4"> </p> <p> Year (yyyy-mm-dd): <input data-validation="date" data-validation-format="yyyy-mm-dd"> </p> <p> Website: <input data-validation="url"> </p> <p> <input type="submit"> </p> </form> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery-form-validator/2.3.26/jquery.form-validator.min.js"></script> <script> $.validate({ lang: 'es' }); </script>