S
S
Sama Samsonov2018-02-15 12:55:12
JavaScript
Sama Samsonov, 2018-02-15 12:55:12

How to check all form fields at the same time?

I have a form with 3 fields

<form id="Parent_f" method="post" action="summa.php">
                        <div class="text">
                            <input type="text" name="amount" id="amount" />
                        </div>
                        <div class="text">
                            <input type="text" name="term" id="term" />
                        </div>
                        <div class="text">
                            <input type="text" name="rate" id="rate" />
                        </div>
         </form>

Checking with jQuery
jQuery(document).ready(function() {
        $("#Parent_f").submit(function (e) {

        var x = $("#amount").val();
        var y = $("#term").val();
        var r = $("#rate").val();

        var intRegex = /[0-9 -()+]+$/;

        if((x.length < 0) || (!intRegex.test(x))){
            $("#amount").css("border", "1px solid red");
            return false;
        }
        if (x == '') {
            $("#amount").css("border", "1px solid red");
            return false;
        }
        if (x == 0) {
            $("#amount").css("border", "1px solid red");
            return false;
        }

        if((y.length < 0) || (!intRegex.test(y))){
            $("#term").css("border", "1px solid red");
            return false;
        }
        if (y == '') {
            $("#term").css("border", "1px solid red");
            //$("#term").html("<p>*данное поле обязательно для заполнения</p>");
            return false;
        }
        if (y == 0) {
            $("#term").css("border", "1px solid blue");
            return false;
        }

});

This code works consistently. i.e. return false; prevents the next action.
How can I check all fields at the same time?

Answer the question

In order to leave comments, you need to log in

4 answer(s)
V
Vladimir, 2018-02-15
@samuser

You need to go through all the fields in a loop and check, and only if there are errors, stop processing.
You can do something like this https://jsfiddle.net/h1sok4hc/1/

A
Alexander Aksentiev, 2018-02-15
@Sanasol

apparently it is not necessary to do a return in this case?

D
Dima, 2018-02-15
Dolgoter @DDolgy

https://codepen.io/DimaDolgoter/pen/LQzJoZ?editors=1010

A
Alex-1917, 2018-02-15
@alex-1917

I'll give you how to check how to send - read about serialize ()
My version allows you to check at least a million inputs in the form, what was given above - you need to write code for each form each time)))

jQuery(".form_btn input").on("click", function(){
  var ok = true;
  var form = jQuery(this).parent().parent('form');
  jQuery(form).find('input[type="text"]').each(function() {//тут можно еще и textarea в проверку включить
    if(jQuery(this).val() == '') {
      ok = false;
      jQuery(this).addClass('error');
    }
    else {
      jQuery(this).removeClass('error');
    }
  });
  if( ok ) {
    var data = [];
    //тут сериализуй форму в массив)))
    jQuery.ajax({
    type: "POST",
    url: "order.php",
    data:  data,
      success: function(data){
        jQuery(form).find('input[type="text"], textarea').attr('value', '');
        jQuery(form).fadeOut('fast', function(){
          jQuery(this).before('<div class="send_ok">спасибо. вась!</div>');
        });
      }
    });
  }        
});

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question