Menu icon Foundation
Abide validation in Reveal - Foundation 5

$("#edit-my-body").on("submit valid invalid", function(e){
      if(e.type === "valid"){	
	    var form = $(this);
	    var container = $('#status');
		  $('#status').show();
		  $(container).html('');
	      $('#submititem').hide();
		  $(container).html('Saving...');
	    $.ajax({
	       url:ajaxurl,
	       type:'POST',
	       dataType: "html",
	       data: $(this).serialize(),
		   timeout: 5000,
		   success: function(results) {
		   	  $(container).html('<div class="alert-box success">Measurement logged</div>');
			  $('#edit-my-body').foundation('reveal', 'close');
			  $(container).html('');
			  $('#submititem').show();
		   },
		   error: function (XMLHttpRequest, textStatus, errorThrown) {
		   	  $(container).html('<div class="alert-box warning"><p>There was an error. Please try again.</p></div>');
		   }
	    });
	   }
	    return false;
	});
            

         

I had this working in Foundation v4 but can't make this work in v5. Every time the submit button is clicked, e.type equals invalid even if the data is valid. Is there a different way to check for a valid form in v5?

Thank you

abideFoundation 5AJAXrevealform

$("#edit-my-body").on("submit valid invalid", function(e){
      if(e.type === "valid"){	
	    var form = $(this);
	    var container = $('#status');
		  $('#status').show();
		  $(container).html('');
	      $('#submititem').hide();
		  $(container).html('Saving...');
	    $.ajax({
	       url:ajaxurl,
	       type:'POST',
	       dataType: "html",
	       data: $(this).serialize(),
		   timeout: 5000,
		   success: function(results) {
		   	  $(container).html('<div class="alert-box success">Measurement logged</div>');
			  $('#edit-my-body').foundation('reveal', 'close');
			  $(container).html('');
			  $('#submititem').show();
		   },
		   error: function (XMLHttpRequest, textStatus, errorThrown) {
		   	  $(container).html('<div class="alert-box warning"><p>There was an error. Please try again.</p></div>');
		   }
	    });
	   }
	    return false;
	});
            

         

I had this working in Foundation v4 but can't make this work in v5. Every time the submit button is clicked, e.type equals invalid even if the data is valid. Is there a different way to check for a valid form in v5?

Thank you

ndh almost 6 years ago

actually I figured out what is going on here. I have a drop down box and each value is pulled from the DB. Some of these values are null in the DB because a user hasn't entered any information yet. I have pattern required on each input, however I only need to validate the option that is selected at the time the form is submitted. Is that possible?
HTML
<form data-abide action="" id="edit-my-body" method="post">
<input type="hidden" name="action" value="fof_edit_body" />
<div class="row">
<div class="large-12 columns">
<select id="my-body-select" class="my-body-select" name="my-body-select">
<option value="my-body0">Weight</option>
<option value="my-body1">Body Fat</option>
<option value="my-body2">Waist</option>
<option value="my-body3">Hips</option>
<option value="my-body4">Chest</option>
<option value="my-body5">Arm</option>
<option value="my-body6">Forearm</option>
<option value="my-body7">Shoulders</option>
<option value="my-body8">Neck</option>
<option value="my-body9">Thigh</option>
<option value="my-body10">Calves</option>
</select>