Как проверить ввод с помощью 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" />

Этот код JavaScript работает нормально для проверки поля «цена».

Вопрос:

Как заставить код работать как глобальная проверка? Пример: проверяет цену, цену2, цену3, цену4, цену5 и т. Д. С помощью одной функции. Пожалуйста, дайте мне знать:)

Answer 1

Моя личная рекомендация будет примерно такой:

<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

Если вы не планируете использовать jQuery, это должно сработать.

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

Я использую jsFormValidator для проверки моей формы, и она работает как шарм. Вам не нужно добавлять тяжелый синтаксис в ваши HTML-теги, например:

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

Вы просто создаете базовый объект JSON, чтобы описать, как вы хотите проверить свою форму:

{
"email": {
    "validEmail":true,
    "required":true
},

"username": {
    "minLength":5,
    "maxLength":15
},

"password": {
    "validPassword":true,
    "match": "password",
    "required":true
}

}

А затем вы просто проверяете всю форму с помощью одной строки кода:

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

Answer 5

Самым простым в этом случае является использование jQuery. Таким образом, вы можете использовать универсальный селектор и применить проверку ко всем элементам.

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

Для чего-либо еще вам нужно будет запросить DOM, и тогда это не будет работать одинаково во всех браузерах.

Сегодня вы не можете ничего делать в Javascript и игнорировать что-то вроде jQuery http://docs.jquery.com/ или Scriptalicious.

Answer 6

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 7

Вы можете проверить все 5 цен и вернуть true, только если все 5 соответствуют вашим правилам проверки.