Develop Reference

Aria-live and showing/hiding a form

I have an Angular 14 app where I display some content. There is a button to put this into "edit mode" wherein I hide the content and show a form. When the user edits the form and clicks "done", the form is hidden and the updated content shows.
This works fine, but I am trying to make this accessible. I added an aria-live to the part with the form and when it is shown the entire form is read out loud using VoiceOver on Mac, but you don't know it's a form. You can tab to the fields and edit the form, though, and then click Done and the form goes away.
However, how do I let unsighted users know that (1) a form has appeared and then (2) the form have disappeared and the regular content has re-appeared?
I have made a stripped down Stackblitz to illustrate.
It's basically this HTML:
<div class="container">
<div class="row">
<div class="col">
<div *ngIf="!showForm" aria-live="polite">
<h1>
Hello {{ myForm.controls.fname.value }}
{{ myForm.controls.lname.value }}
</h1>
<button class="btn btn-secondary" type="button" (click)="onEditForm()">
Edit Greeting
</button>
</div>
<form [formGroup]="myForm" *ngIf="showForm" aria-live="polite">
<h3 class="sr-only">Edit Greeting Form</h3>
<div class="form-group mb-4">
<label for="fname">First Name</label>
<input
type="text"
id="fname"
formControlName="fname"
class="form-control"
/>
</div>
<div class="form-group mb-4">
<label for="lname">Last Name</label>
<input
type="text"
id="lname"
formControlName="lname"
class="form-control"
/>
</div>
<button type="button" class="btn btn-primary" (click)="onDoneForm()">
DONE
</button>
</form>
</div>
</div>
</div>

ARIA live regions aren't well suited for elements containing a lot of text or other things. The screen reader will read them all at once, and, for long things, it's rarely the best thing to do because the user can't interrupt or pause the read, or if he/she does it, the rest is kind of lost.
A much better thing to do for forms is to put the focus on the first input field. The first label will be read as well as the field type, and so the user will know that he/she has to enter some information, and then will press tab to go to the next field, and so on.
Additionally to that, you can use ARIA live, but not on the form or content shown itself. The best use of ARIA live is for displaying short strings saying "The form is shown", "Content is loading", "Your request has been submitted", "There are 12 search results", etc.

Display dialog on client-side before form is submitted

I have a form that works on its own using required attributes in each input to make sure the user inputs a value. IE:
<form id="myForm">
<div class="formcontainer">
<div class="formText">
First Name <span class="required">*</span>
</div>
<div class="formBox" id="test">
<input name="firstname" id="firstname" type="text" required />
</div>
<div class="formText">
Last Name <span class="required">*</span>
</div>
<div class="formBox"><input name="lastName" type="text" required /></div>
</div>
<div class="buttons">
<div class="formButton" id="submit">
<asp:Button onclick="btnRequestSampleSubmit" Text="Submit" runat="server" />
</div>
<div class="formButton" id="reset">
<input type="reset" value="Reset" tabindex="8"/>
</div>
</div>
</form>
To save space, I have about 6 other fields in the form, but wanted to give you an idea. When I submit the form, the page refreshes. All fine and dandy except I wanted to add in a .dialog box on the submit button so that it lets the user know that the form went through. So I added this:
$('.buttons #submit').on('click', function (e) {
$('#dialog').dialog({
position: { my: "center", at: "center", of: window },
});
$('#fade').show();
return false;
});
(#fade) is just an opacity box that fills the screen so when the user clicks on it, the box closes and the page will refresh. When I add in the bottom script, the validations work, but if the user hits enter or clicks on the submit button before everything is filled out, the form is submitted without having the rest of the input fields filled in. If I take out the submit JS here with the dialog, everything works fine, including validations, but I want to add the .dialog so the user knows the form is submitted properly. I can't figure out how to combine all this and make it work. Any suggestions?
Also this is done in c# so the btnRequestSampleSubmit is tying how the form is submitted to an email using the input fields.

Validate form on submit only using parsley.js

I have a simple form
<form action="#" method="GET" class="parsleyVal">
<div class="input-group input-group-lg">
<input type="email" name="email" class="form-control input-email"
placeholder="Enter your email"
data-parsley-required-message="Please enter your email address"
data-parsley-required title="Please enter your email address"
auto-complete="off" data-parsley-trigger="submit" />
<span class="input-group-btn">
<button class="btn btn-orange" type="submit" data-parsley-trigger="click touch">
Sign up
</button>
</span>
</div>
</form>
Validation starts when the sign-up button is clicked.
However, if there is no email specified, an error is shown:
enter your email.
When users start typing their email address, parsley.js does the automatic validation and shows that email must be valid.
I'd like parsley.js to re-validate the email field when submit button is clicked again but not on the fly.
I have tried xCodexInlinexPlacexHolderx on the input field - does not help.

Looks like I finally figured out what I wanted.
Might be not ideal way to do it, if anyone could recommend something else.
$('.parsleyVal input[type=email]').on('keyup keydown', function () {
$('.filled').removeClass('filled');
$('.parsleyVal').parsley().destroy();
})
Script removes class to hide error message and destroy parsley validation, which will be triggered again on sign-up button click.

You can control what triggers the validation with two different settings:
data-parsley-trigger
Setting for what triggers the validation the first time. The default is null which basly means on submit
data-parsley-trigger-after-failure
Setting for what triggers a revalidation after the first failure. The default is input which means that the field will be revalidated after each change on the field.
The setting you need is: data-parsley-trigger-after-failure
Example:
<input type="email" id="profile-email"
data-parsley-required="true"
data-parsley-trigger-after-failure="submit"/>

Angular-messages appears & vanishes whenever page is Reloaded

I have two ng-messages associated with one Text field but I want one Message as a default -
This field is Mandatory!
which loads with the page get refreshed/opened
but the second one i.e Username contains atleast 3 characters should only shown when atleast one text entered into the textbox.
Whenever the page is loaded the second message which didnt required is shown and then vanishes when the page is loaded completely,How can I remove this and make the page more prominent.
Here's my code what I am trying is
<div class="errormsg" ng-messages="loginForm.username.$error">
<div ng-message="required">This field is Mandatory!</div>
<div ng-message="minlength">Username contains atleast 3 characters</div>
</div>
Suggest me a way to achieve this in angular.
Thanks in advance.

You need to use $pristine alongwith $invalid. See below example. I am using help-block instead of ng-message. You can add additional validations like min length, max length etc as desired.
<form name="contactUsForm" ng-submit="sendContactUsMessage();" novalidate>
<div class="form-group" ng-class="{ 'has-error' : contactUsForm.name.$invalid && !contactUsForm.name.$pristine }">
<label for="name">Name<span class="glyphicon glyphicon-asterisk mandatory" aria-hidden="true" /></label>
<input type="text" name="name" class="form-control" placeholder="When were you born?" ng-model="message.name" ng-required="true">
<p ng-show="contactUsForm.name.$invalid && !contactUsForm.name.$pristine" class="help-block">Name is required.</p>
</div>
</form>

Angular JS ng-message update only on page submit

I have a form wherein I am displaying validation errors only on page submit as in the code below. This validation works fine but as soon as the user corrects the validation on the input field. The validation message goes away immediately. Is there a way to preserve this validation message until the user submits the page again? My requirement is that validation messages should appear and disappear only on page submits.
<span id="error" ng-if="addForm.$submitted">
<div class="ErrorMsgBox">
<ul>
<li ng-messages="addForm.startDate.$error">
<small id="startDate_req" ng-message="required">Date is mandatory.</small>
</li>
</ul>
</div>
</span>
For example, if the user does not give a date and submits the form, the user is presented with a validation message "Date is mandatory". Now when user enters any value, the message goes way. I need this validation message to be retained until the page submit again.
I tried ng-model-options but input field is not retaining the value until the page is submitted.
ng-model-options="{ updateOn: 'submit' }"
Please suggest.

You can add a ng-if in conjunction with form.$dirty or form.$submitted to your messages directive. Also you can create your own custom function
ng-if: showErrors()
See: https://www.sitepoint.com/easy-form-validation-angularjs-ngmessages/
<label>User Message:</label>
<textarea type="text" name="userMessage" ng-model="message"
ng-minlength="100" ng-maxlength="1000" required>
</textarea>
<div ng-messages="exampleForm.userMessage.$error"
ng-if="exampleForm.userMessage.$dirty">
<div ng-message="required">This field is required</div>
<div ng-message="minlength">Message must be over 100 characters</div>
<div ng-message="maxlength">Message must not exceed 1000 characters</div>
</div>