Boucle à travers toutes les zones de texte dans un formulaire à l'aide de jQuery

J'ai un formulaire qui se présente comme un tableur.

Je veux valider le texte dans chaque zone de texte et si ce n'est pas numérique, modifier l'arrière-plan de la zone de texte et d'afficher un message.

Je peux tout faire sauf de la boucle de la partie.

Je suppose que c'est un de...chaque instruction?

  • Semble que vous pourriez être mieux d'aller au large avec un validation plugin plutôt qu'en parcourant les DOM et en essayant de handroll il. Ou, en fonction de la compatibilité du navigateur besoins, laisser le navigateur gère pour vous et utilisez une entrée numérique de type.
  • +1 j'ai aimé la façon dont vous avez posé la question. demandant un petit peu pour faire une grande chose et ne demande pas à "tout faire pour moi". belle question!
InformationsquelleAutor Tom | 2012-04-25
  1. 15
    $('form input[type="text"]').each(function(){
        //Do your magic here
        if (this.value.match(/\D/)) //regular expression for numbers only.
            Error();
});

    Si vous en avez l'id du formulaire:

    $('#formId input[type="text"]').each(function(){
        //Do your magic here
});
    InformationsquelleAutor gdoron is supporting Monica
  2. 5
    //locate all ":input" elements within a generic <form>,
//then use .each() to loop through all results
$('form :input').each(function(){
  var $el = $(this); //element we're testing

  //attempt to cast the form's value to a number
  var n = parseFloat($el.val());

  //check if the conversion passed
  if (isNaN(n)){
    //$el does not have a number in it
  }
});

    Je pense que c'est ce que vous êtes après. Vous pouvez également spécifier input[type="text"] si vous voulez être plus précis à <input type="text" ... />

    Ou, de façon plus concise:

    $('form input[type="text"]').each(function(i,e){
    if (isNaN(parseFloat(e.value,10))){
        $(e).css('backgroundColor','red');
    }
});
    • :input sélectionnera <select> éléments, il n'y a pas de raison de les valider, il n'est pas de "texte libre"
    • Pas seulement <select> même le buttons
    • En effet, :input est probablement trop vague, mais je ne savais pas si nous parlions type="text", à l'aide de HTML5 et type="number" ou tout autre variation (c'est aussi pourquoi j'ai mentionné l'autre sélecteur dans ma réponse)
    • au lieu de var $el = $(this); $el.val() utiliser ceci: this.value. N'abusez pas de jQuery, il ne doit pas être utilisé au lieu de javascript natif des éléments du DOM.
    • Je l'ai fait dans le deuxième exemple, mais je ne savais pas OPs niveau d'expérience, et .val() cris simplicité quand il s'agit d'éléments d'entrée. Je doute aussi qu'ils font quelque chose dans un environnement de production.
    InformationsquelleAutor Brad Christie
  3. 2

    jsFiddle( http://jsfiddle.net/BctQP/18/ )

    <form id="theForm">
    <input type="text"/>
    <input type="text"/>
    <input type="text"/>
    <input type="text"/>
    <input type="button" onclick="validateTextBoxes();" value="Click"/>
</form>

<script>
    function validateTextBoxes()
    {
        $("#theForm input").each( function()
        {
            if ( $(this).is('[type=text]') && !parseInt( $(this).val() ) )
            {
                $(this).css("background-color","red");
            }
        });
    }
</script>​
    • Je pose la question: Vous avez choisi d'utiliser jQuery pour tout, mais le bouton de liaison. Pourquoi ne pas $('#theForm input[type="button"]').click(...)? (Ou, mieux encore, en donnant la touche d'un IDENTIFIANT et d'liaison à cet)
    • Quelle a été votre expérience, le cas échéant, avec $.isNumeric? Mieux ou pire que parseInt, etc.?
    • Tu aurais pu faire beaucoup plus simple avec [type="text"] dans le sélecteur.
    • href="https://github.com/jquery/jquery/blob/master/src/core.js#L483-485" >6 1, une demi-douzaine de l'autre. $.isNumeric valide les nombres à virgule flottante en plus des entiers, c'est la grande différence.
    • c'est plus comme parseFloat que parseInt. si les valeurs décimales sont valides, vous pouvez utiliser "$.isNumeric" sinon, utiliser parseInt ou une expression régulière.
    InformationsquelleAutor Jonathan Payne
  4. 1

    Pour chaque boucle:

    for (var $input in $('input[type="text"]')) {
    //code here
}
    InformationsquelleAutor Kay
  5. 0

    Eu ce travail pour moi! 🙂 références

    Boucle à travers toutes les zones de texte dans un formulaire à l'aide de jQuery &
    https://stackoverflow.com/a/311589

    JS:

    $(document).ready(function() {
		$('form button[type=submit]').click(function() {
			//attach the listener to your button
			debugger;
			var sub_form = $(this.form);
			//use the native JS object with "this"
			$(':input[class="required"]', sub_form).each(function() {
				if (this.value == "") {
					alert("is empty");
				} else {
					alert(this.value);
				}
			});
		});
	});

    CSS:

    body {
  margin: 5px;
  padding: 5px;
  border: 1px solid black;
}
#topContainer {
  width: auto;
  margin: 2px;
  padding: 2px;
  border: 1px solid black;
  height: 100px;
}
#mainContainer {
  width: auto;
  height: 200px;
  margin: 2px;
  padding: 2px;
  border: 1px solid black;
}
#footerContainer {
  width: auto;
  height: 200px;
  margin: 2px;
  padding: 2px;
  border: 1px solid black;
}
.gridRow4 {
  margin: 2px 5px;
  width: 25%;
}
.gridRow5 {
  margin: 2px 5px;
  width: ;
}

    HTML:

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div id="topContainer">
<h2>text goes here
</h2>
</div>
<div id="mainContainer">
<form id="form1">
<select id="input1" class="required" name="input1">
<option value="volvo">Volvo
</option>
<option value="saab">Saab
</option>
<option value="mercedes">Mercedes
</option>
<option value="audi">Audi
</option>
</select>
<select id="input2" class="required" name="input2">
<option value="Alpha">Alpha
</option>
<option value="Beta">Beta
</option>
<option value="Gamma">Gamma
</option>
<option value="Radial">Radial
</option>
</select>
<select id="input3" class="required" name="input3">
<option value="">
</option>
<option value="up">up
</option>
<option value="down">down
</option>
<option value="left">left
</option>
</select>
<input id="input4" class="required" type="text" name="input4" />
<input id="input5" class="required" type="text" name="input5" />
<select id="input6" class="required" name="input6">
<option value="1">1
</option>
<option value="2">2
</option>
<option value="3">3
</option>
<option value="4">4
</option>
</select>
<select id="input7" class="required" name="input7">
<option value="happy">happy
</option>
<option value="sad">sad
</option>
<option value="round">round
</option>
<option value="flat">flat
</option>
</select>
<button id="btn1" name="btn1" type="submit">Submit
</button>
</form>
</div>
<div id="footerContainer">
<form id="form2">
<input id="inputa" class="required" name="inputa">
<input id="inputb" class="required" name="inputb">
<input id="inputc" class="required" name="inputc">
<input id="inputd" class="required" name="inputd">
<input id="inpute" class="required" name="inpute">
<input id="inputf" class="required" name="inputf">
<input id="inputg" class="required" name="inputg">
<button id="btn2" name="btn2" type="submit">Submit
</button>
</form>
</div>
</body>

    InformationsquelleAutor CARRION RAYMI KAPAK