So validieren Sie die Eingabe mit 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" /> 

Dieser JavaScript-Code funktioniert einwandfrei, um das Feld "Preis" zu validieren.

Frage:

Wie um den Code zu machen als globale Validierung zu arbeiten? Beispiel: würde den Preis, Preis2, Preis3, Preis4, Preis5 ​​usw. mit einer einzigen Funktion validieren. Bitte lassen Sie mich wissen :)

Answer 1

Meine persönliche Empfehlung wäre so etwas wie diese:

<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

Sie können alle 5 Preise validieren und geben nur dann true zurück, wenn alle 5 Ihren Validierungsregeln entsprechen.

Answer 3

Am einfachsten ist in diesem Fall wirklich jQuery zu verwenden. Auf diese Weise können Sie einen generischen Selektor verwenden und die Validierung für alle Elemente anwenden.

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

Für alles andere müssten Sie das DOM abfragen und dann funktioniert das nicht in allen Browsern gleich.

Heute können Sie wirklich nichts in Javascript tun und etwas wie jQuery http://docs.jquery.com/ oder Scriptalicious ignorieren.

Answer 4

Wenn Sie nicht mit jQuery planen, sollte dies funktionieren.

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 5

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

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

}); 

Answer 6

Ich benutze jsFormValidator meine Form zu validieren und es funktioniert wie ein Charme. Sie brauchen keine schwere Syntax, um die HTML-Tags, Dinge wie hinzuzufügen:

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

Sie einfach erstellen Sie ein grundlegendes JSON-Objekt zu beschreiben, wie Sie Ihr Formular validieren mögen:

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

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

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

}

Und dann bestätigen Sie einfach die ganze Form mit auf einzelne Codezeile:

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

Answer 7

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>