How to validate input using javascript

Answer 1

I use jsFormValidator to validate my form and it works like a charm. You don't need to add heavy syntax to your HTML tags, things like:

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

You just 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 validate the whole form with on single line of code:

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

Answer 2

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 3

The easiest in this case is really to use jQuery. This way you can use a generic selector and apply the validation on all items.

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

For anything else you would need to query the DOM and then that doesn't work the same in all browsers.

Today, you can't really do anything in Javascript and ignore something like jQuery http://docs.jquery.com/ or Scriptalicious.

Answer 4

jQuery Form Validator is a feature rich and multilingual jQuery plugin that makes it easy to validate user input while keeping your HTML markup clean from javascript code.

Even though this plugin has a wide range of validation functions it's designed to require as little jQuery network traffic as possible. This is achieved by grouping together validation functions in "modules", making it possible to load only those functions that's needed to validate a particular 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>

Answer 5

If you do not plan on using 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 6

$('#form input').each(function(){

   console.log('valid',$(this)[0].validity.valid);

});