Form not submitted when some required fields cloned but not actually touched

Form not submitted when some required fields cloned but not actually touched

Hi,


I am very new to jQuery but getting addicted pretty quickly.  I have an small app used to test one of our APIs and provide the ability to clone a section of input fields to be passed to our api, think line items.   Below is the script I am using to clone, append and rename the field ids.   As the subject stated - if I don't mark the fields as 'required' in the html, then the form will be get posted just fine.   The problem is that if I don't actually type in the input fields that are required, then the form data does NOT get posted to the server.   


Debugging thru the Chrome JS debugger, the isFormValid field always stays set to true.  The dom fields all appear to be constructed correctly and there is a 'value' in 




// main function for cloning a section
    addRow:  function addRow ( idToClone, idToAppendTo, baseAttributeId, event) {
      event.preventDefault();


      // tag name regex text[0].text
      var regex1 = /^(.*\[)(\d)+(\].*)/i;
      
      // tag id regex name-0
      var regex = /^(.*)(\d)+$/i;
      var cloneIndex = $("." + baseAttributeId ).length;


      $(idToClone).clone(true, true)
          .appendTo(idToAppendTo)
          .attr("id", baseAttributeId +  cloneIndex)
          .find("*").each(function() {
              var id = this.id || "";
              var match = id.match(regex) || [];
              if (match.length == 3) {
                  this.id = match[1] + (cloneIndex);
              }
              var name = this.name || "";
              var match1 = name.match(regex1) || [];
              if (match1.length == 4) {
                  this.name = match1[1] + cloneIndex + match1[3];
              }
          });
          cloneIndex++;
    },


      // this is the function called when hitting the submit button
     fade: function fade(e) {
      var isFormValid = true;
      $("form").find('input[required]').each(function(){
        if ($.trim($(this).val()).length == 0){
            isFormValid = false;  // never get here - but cloned required fields seem to be a problem!
        }
      });

      if (!isFormValid) {
        e.preventDefault();
        alert("Please fill in all the required fields (indicated by *)");
        return;
      }

      console.log('showing post msg, spinner and fading...');
      $('.hdrmsg').show();
      $('.container-fluid').fadeToggle(700);
    }, 

Is the problem with the order of the operations or is there something I am missing about html required fields?