Menu icon Foundation
manually set aria-invalid

I have the following function checking the email entry on my form. Everything is working as expected:
- email format check works (standard abide type="email")
- additional validation pattern works (not shown)
- my check_email.php script works, finding email addresses that already exist in the db
- the html of the email-result span is updated properly when a duplicate email is found by check_email.php
- the modal fires as expected.

I want to set the aria-invalid of the email input to true, and have the expected red font etc. that occurs when the format check find an invalid email.

Right now, that does not happen, the field is seen as valid and the form will submit with the duplicate email address.

How do I manually set aria-invalid so that my form will not submit when the only error is a duplicate email address?

    <script>
	  $("#email").keyup(function(){
		  var len = $("#email").val().length;
		  var email = $("#email").val();
		  var sub = '';
		  
		  if(len >= 4 && email.substr(len -4) == '.edu'){
			  $.post('check_email.php', {'email':email}, function(data) {
				$("#email-result").html(data);
				if(data != ''){
					console.log('NON BLANK DATA: ',data);
					console.log('ARIA-INVALID ', $("#email").attr("aria-invalid"));
                    
					// THIS DOES NOT WORK!!!
					$("#email").attr("aria-invalid","true").attr("class","error");
                    
				    $('#emailModal').foundation('reveal', 'open')
				} else {
					console.log('NO DATA: ',data);
				}
			  });
		  }
		});
	</script>

            

         

abidearia-invalidAJAXFoundation

I have the following function checking the email entry on my form. Everything is working as expected:
- email format check works (standard abide type="email")
- additional validation pattern works (not shown)
- my check_email.php script works, finding email addresses that already exist in the db
- the html of the email-result span is updated properly when a duplicate email is found by check_email.php
- the modal fires as expected.

I want to set the aria-invalid of the email input to true, and have the expected red font etc. that occurs when the format check find an invalid email.

Right now, that does not happen, the field is seen as valid and the form will submit with the duplicate email address.

How do I manually set aria-invalid so that my form will not submit when the only error is a duplicate email address?

    <script>
	  $("#email").keyup(function(){
		  var len = $("#email").val().length;
		  var email = $("#email").val();
		  var sub = '';
		  
		  if(len >= 4 && email.substr(len -4) == '.edu'){
			  $.post('check_email.php', {'email':email}, function(data) {
				$("#email-result").html(data);
				if(data != ''){
					console.log('NON BLANK DATA: ',data);
					console.log('ARIA-INVALID ', $("#email").attr("aria-invalid"));
                    
					// THIS DOES NOT WORK!!!
					$("#email").attr("aria-invalid","true").attr("class","error");
                    
				    $('#emailModal').foundation('reveal', 'open')
				} else {
					console.log('NO DATA: ',data);
				}
			  });
		  }
		});
	</script>

            

         
Rafi Benkual about 4 years ago

I think you add the attribute with jQuery. $('#someid').attr('name', 'value');

You'd bind it to the 'invalid' trigger-handler.