Check and return mandatory fields

Question

I have to check if all mandatory fields are filled in before I send them to database. This is done trough column IDKarakteristike. If the field is mandatory then value of this column is True if not it is False. Here's a code snippet:

https://jsfiddle.net/nzx3tdgp/

I need help with this code below.This code needs to be changed so it returns true if all mandatory fields are filled in and false if they are not. Because after this I have a ajax call that sends some values to c# if it returns true.

$(function () {
    $("#myButton").on("click", function () {
        // Loop all span elements with target class
        $(".IDKarakteristike").each(function (i, el) {
            // Skip spans which text is actually a number
            if (!isNaN($(el).text())) {
                return;
            }

            // Get the value
            var val = $(el).text().toUpperCase();
            var isRequired = (val === "TRUE") ? true :
                             (val === "FALSE") ? false : undefined;

            // Mark the textbox with required attribute
            if (isRequired) {
                // Find the form element
                var target = $(el).parents("tr").find("input,select");

                if (target.val()) {
                    return;
                }

                // Mark it with required attribute
                target.prop("required", true);

                // Just some styling
                target.css("border", "1px solid red");
            }
        });
    })
});

Ajax that takes the values from some fields and table and sends it to c#. This should fire it the first function returns true(all mandatory fields are filled in)

var ddl = $('#MainContent_ddlBusinessCenter').val()

var myCollection = [];

$('#MainContent_gvKarakteristike tbody').find('tr:gt(0)').each(function(i, e) {
  var row = $(e);
  myCollection.push({
    label: valuefromType(row.find(row.find('td:eq(1)').children())),
    opis: valuefromType(row.find(row.find('td:eq(3)').children()))
  });

});

console.log(myCollection);

function valuefromType(control) {
  var type = $(control).prop('nodeName').toLowerCase();


  switch (type) {
    case "input":
      return $(control).val();
    case "span":
      return $(control).text();
    case "select":
      ('Selected text:' + $('option:selected', control).text());
      return $('option:selected', control).text();
  }
}
var lvl = $('#MainContent_txtProductConstruction').val()
if (lvl.length > 0) {
  $.ajax({
    type: "POST",
    url: "NewProductConstruction.aspx/GetCollection",
    data: JSON.stringify({
      'omyCollection': myCollection,
      'lvl': lvl,
      'ddl': ddl
    }),
    contentType: "application/json; charset=utf-8",
    dataType: "json",

    success: function(response) {
      if (parseInt(response.d) > 0)
        alert("Saved successfully.");
      else
        alert("This object already exists in the database!");
      console.log(response);
      location.reload(true);
    },
    error: function(response) {
      alert("Not Saved!");
      console.log(response);
      location.reload(true);
    }
  });
} else {
  alert("Please fill in the Product Construction field!")
}

Answer 1

Just run the thing from the start:

$(function() {
  $(".IDKarakteristike").each(function(i, el) {
    if ($(el).text().toUpperCase() === "TRUE") {
      $(el).closest("tr").find("input,select").prop("required", true);
    }
  });

  $("#myButton").on("click", function() {
    var ok = true;
    $("[required]").each(function() {
      $(this).css("border", "1px solid black"); // reset

      if (!$(this).val()) {
        ok = false;
        $(this).css("border", "1px solid red");
      }
    });
    if (ok) {
      // do what you need here
    }
  });
});

You can also make the button a submit button and preventDefault on submit - then you can make all the required fields "required" and the browser will stop the submission and show error messages for you

Answer 2

what about just taking a global variable outside your click function and utilizing that?

//make a variable
var ajaxCheck;

$(function () {
    $("#myButton").on("click", function () {
        //put your condition here, this can be inside a loop:
        if (hasValue) {
            ajaxCheck = true;
            //either use your ajax check in your ajax call or put ajax code here
        } else {
            ajaxCheck = false;
        }
    });
});