I am using ASP.Net Core 5.0. I am trying to get my client side validation to work so that when you tab out of a required field, if the field is blank and required, the error message appears.
In my model I have -
[Required(ErrorMessage = "Please enter in the name.")]
[MaxLength(100, ErrorMessage = "The maximum length for the name is 100 characters.")]
public string Name { get; set; }
I have a partial view _ValidationScriptsPartial.cshtml which contains -
<script src="~/lib/jquery-validation/dist/jquery.validate.min.js"></script>
<script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js"></script>
In my view I have -
#section Scripts {
#{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
}
Also in the view I have the field -
<div class="form-row">
<div class="col-md-7">
<div class="row">
<label asp-for="Name" class="control-label col-md-3">Name</label>
<div class="col-md-8 mb-2">
<input asp-for="Name" class="form-control" maxlength="100" />
<span asp-validation-for="Name" class="text-danger"></span>
</div>
</div>
</div>
</div>
When the code is run the html is -
<div class="col-md-8 mb-2">
<input class="form-control" maxlength="100" type="text" data-val="true" data-val-maxlength="The maximum length for the name is 100 characters." data-val-maxlength-max="100" data-val-required="Please enter in the name." id="Name" name="Name" value="The Name">
<span class="text-danger field-validation-valid" data-valmsg-for="Name" data-valmsg-replace="true"></span>
</div>
When I clear the field and I tab out, nothing happens! I have noticed that the value attribute of the field in HTML is not cleared. Is that the problem and if so, why is not clearing?
Am I missing anything?
Thanks
Related
How can I write a method in cypress so that I search for the text content "Clinic location is active?" and after finding this text operate the button below it (you have a printscreen for guidance HERE ).
Until now I had written this method to operate the button to be active / inactive after the redClass class, but to be detected by its position on the page, which is slightly useless if a button appears in front of it in the future:
setToOn(value: number) {
cy.get(this.controlsSelector).eq(value).then(($button) => {
if ($button.hasClass('redClass')) {
cy.get(this.offSliderButton).eq(value).click({force:true});
}
})
}
Now I would like not to look for the button by its position (value in the case of the above method), called with the function cypress .eq(), but by the text that is above it, in the control-label class
<div class="form-group">
<label class="control-label" for="inputType">Clinic location is active?</label>
<div class="controls">
<div class="checkboxControl no-select">
<div class="checkboxSlider change greenClass">
<div class="checkboxSlider-state checkboxSlider-state-on">Yes</div>
<div class="checkboxSlider-state checkboxSlider-state-off">No</div>
<input checked="checked" class="form-control" data-val="true" data-val-required="The Clinic location is active? field is required." id="IsActive" name="IsActive" placeholder="Clinic location is active?" type="checkbox" value="true">
<input name="IsActive" type="hidden" value="true">
<label class="grey"></label>
</div>
</div>
</div>
</div>
So I want to call a method,from the test file, like:
clinicLocations.operateButtons('Clinic location is active?').setToOn();
Code for another button from that page:
<div class="form-group">
<label class="control-label" for="inputType">Allow Online Scheduling?</label>
<div class="controls">
<div class="checkboxControl no-select">
<div class="checkboxSlider change greenClass">
<div class="checkboxSlider-state checkboxSlider-state-on">Yes</div>
<div class="checkboxSlider-state checkboxSlider-state-off">No</div>
<input checked="checked" class="form-control" data-val="true" data-val-required="The Allow Online Scheduling? field is required." id="AllowOnlineScheduling" name="AllowOnlineScheduling" placeholder="Allow Online Scheduling?" type="checkbox" value="true"><input name="AllowOnlineScheduling" type="hidden" value="true">
<label class="grey"></label>
</div>
</div>
</div>
</div>
And another code structure for an inactive button (with redClass) :
<div class="form-group">
<label class="control-label" for="inputType">Use service facility NPI number in box 32a of HCFA form?</label>
<div class="controls">
<div data-toggle-selector=".NPInumberBox32a" class="checkboxControl no-select">
<div class="checkboxSlider redClass">
<div class="checkboxSlider-state checkboxSlider-state-on">Yes</div>
<div class="checkboxSlider-state checkboxSlider-state-off">No</div>
<input class="form-control" data-val="true" data-val-required="The Use service facility NPI number in box 32a of HCFA form? field is required." id="UseFacilityNPINoInHCFA" name="UseFacilityNPINoInHCFA" placeholder="Use service facility NPI number in box 32a of HCFA form?" type="checkbox" value="false"><input name="UseFacilityNPINoInHCFA" type="hidden" value="false">
<label class="grey"></label>
</div>
</div>
</div>
</div>
I hope I have provided all the necessary information.
In terms of Cypress commands it's just this
cy.contains('.form-group', 'Clinic location is active')
.find('input[type="checkbox"]')
.click()
I don't understand what clinicLocations.operateButtons refers to, or what your setOn() is doing exactly, but above is correct Cypress code for your requirement.
In angular js, we have $submitted to populate error messages on submit click.
How can we display all validation errors on submit click in Angular
HTML:
<form #nameForm="ngForm" novalidate (ngSubmit)="saveNameForm(formModel)">
<div class="form-group">
<label for="inputName" class="form-control-label"> Name</label>
<input type="text" id="inputName" name="lotCode [(ngModel)]="formModel.name" #lotCode="ngModel" aria-describedby="nameHelp"
autocomplete="new-password" required>
<small id="nameHelp" class="text-danger" *ngIf="lotCode.invalid && lotCode.touched">Required</small>
</div>
<div class="form-group">
<label for="inputDescription" class="form-control-label"> Description</label>
<input type="text" id="inputDescription" name="desCode" [(ngModel)]="formModel.description" #desCode="ngModel" aria-describedby="descriptionHelp"
autocomplete="new-password" required>
<small id="descriptionHelp" class="text-danger" *ngIf="desCode.invalid && desCode.touched">Required</small>
</div>
<button type="submit">Submit </button>
</form>
Component:
export class AppComponent {
formModel: FormModel= new FormModel();
saveNameForm(formModel){
console.log(formModel)
}
}
export class FormModel {
name: string;
description:string;
}
https://stackblitz.com/edit/angular-rizsuy?file=src%2Fapp%2Fapp.component.ts
Here is the solution:
https://stackblitz.com/edit/angular-8jaaqz?file=src%2Fapp%2Fapp.component.html
You should use a variable to set submitted
if submitted then will display error
Angular uses the same form validation that native HTML5 does. Just do this in an Angular context. In the following example, we can use *ngIf to control the display of the messages, and .dirty and .touched to determine if the user interacted with the input.
Example from docs:
<input id="name" name="name" class="form-control"
required minlength="4" appForbiddenName="bob"
[(ngModel)]="hero.name" #name="ngModel" >
<div *ngIf="name.invalid && (name.dirty || name.touched)"
class="alert alert-danger">
<div *ngIf="name.errors.required">
Name is required.
</div>
<div *ngIf="name.errors.minlength">
Name must be at least 4 characters long.
</div>
<div *ngIf="name.errors.forbiddenName">
Name cannot be Bob.
</div>
</div>
I would like to know how can i display an error message below the input field using angular js. If the field is empty i want to display "This field is required". Also how to check if the field name starts with alphanumeric values like (\?/%*:|"<.>) i need to display the error "The field name should not start with alphanumeric values" below that input field. // code goes here
<div ng-controller="ModalController">
<form novalidate name="inputForm" class="form-horizontal">
<div class="row">
<div class="col-md-12">
<cp-input name="username" ng-model="user.name"
label="{{'formlabels.reponame' | translate}}" required="true"
error-state="right">
</cp-input>
</div>
</div>
<div style="color:red" ng-show="inputForm.username.$error.required">First name is required</div><br>
</form>
<!-- Show Confirm -->
<button type="button" class="btn btn-primary" data-dismiss="modal"
data-ng-click="submitData()">Add</button>
</div>
It would be a good idea to use ngMessages directive and ngPattern - take a look at the doc link with example
<form name="myForm">
<label>
Enter your name:
<input type="text"
name="myName"
ng-model="name"
ng-minlength="5"
ng-maxlength="20"
ng-pattern="^[^\w+$]"
required />
</label>
<pre>myForm.myName.$error = {{ myForm.myName.$error | json }}</pre>
<div ng-messages="myForm.myName.$error" style="color:maroon" role="alert">
<div ng-message="required">You did not enter a field</div>
<div ng-message="minlength">Your field is too short</div>
<div ng-message="maxlength">Your field is too long</div>
</div>
</form>
ref https://docs.angularjs.org/api/ngMessages/directive/ngMessages
ng-messages will help you..Try this
<input ng-model="typeText" id="Sample" name="Sample" type="text" ng-pattern="^$|^[A-Za-z0-9]+" required/>
or ng-pattern="/^[a-zA-Z\s]*$/"
<div ng-messages="formname.Sample.$error">
<div ng-message="pattern">only characters are allowed</div>
<div ng-message="required">field required</div>
</div>
So I've been working on a back-end interface for where I'm interning, and everything's been going smoothly mainly. I made a page where you insert a customer. there's a checkbox to add shipping information, and the fields are hidden, and only shown when the checkbox is ticked. it is also required when its showing. i did the same thing for a Tax Exempt check box, where it hides a field to enter a tax id, and is only required when its checked and showing, otherwise, it isn't required. both of these features work great on pc, and theyre coded exactly the same. However; when i go to try it on mobile, the shipping checkbox works, and drops down the fields to enter the info. Yet, the tax exempt box doesnt show the field to enter the Tax ID.
Shipping html:
<div id="changeShipInputs">
<div class="form-group">
<div class="col-md-12">
<input id="Sstreet" name="Sstreet" type="text" maxlength="150" placeholder="Street Name (required)" class="form-control">
</div>
</div>
<div class="form-group">
<div class="col-md-4">
<input id="Scity" name="Scity" type="text" maxlength="35" placeholder="City (required)" class="form-control">
</div>
<div class="col-md-4">
<input id="Sstate" name="Sstate" type="text" maxlength="35" placeholder="State (required)" class="form-control">
</div>
<div class="hidden-lg hidden-md"> </div>
<div class="col-md-4">
<input id="Szipcode" name="Szipcode" type="text" maxlength="15" placeholder="Zip (required)" class="form-control">
</div>
</div>
</div>
Tax html:
<div id="changeTaxInputs">
<div class="form-group">
<div class="col-md-3">
<input id="taxID" name="taxID" type="text" maxlength="15" placeholder="Tax ID: (required)" class="form-control">
</div>
</div>
</div>
<hr>
<div class="col-xs-12">
<div class="form-group">
<label for="comment">Notes:</label>
<textarea class="form-control" rows="5" maxlength="255" name="comment" id="comment"></textarea>
</div>
</div>
<div class="col-xs-12">
<br>
</div>
Javascript:
var form = $('#myForm'),
checkbox = $('#changeShip'),
chShipBlock = $('#changeShipInputs');
chShipBlock.hide();
checkbox.on('click', function() {
if($(this).is(':checked')) {
chShipBlock.show();
chShipBlock.find('input').attr('required', true);
} else {
chShipBlock.hide();
chShipBlock.find('input').attr('required', false);
}
});
var form = $('#myForm'),
checkbox = $('#changeTax'),
chTaxBlock = $('#changeTaxInputs');
chTaxBlock.hide();
checkbox.on('click', function() {
if($(this).is(':checked')) {
chTaxBlock.show();
chTaxBlock.find('input').attr('required', true);
} else {
chTaxBlock.hide();
chTaxBlock.find('input').attr('required', false);
}
});
The first script is the shipping, the second is the tax.
can anyone tell me why JUST THE TAX BOX wont work on mobile, yet the shipping box works fine on mobile. They both work great on desktop.
Since it's working on JSFiddle correctly, my guess is that maybe a containing div or element is not closed correctly. Compare the containers of the changeShipInputs and changeTaxInputs closely and report back.
I've been able to narrow down where the 'error' occurs, which is within the credit card form section:
<div class="form-group">
<label for="cardNumber">Your card number</label>
<div class="input-group">
<input
type="tel"
class="form-control card-number input-medium"
name="cardNumber"
placeholder="Enter Your Valid Card Here"
autocomplete="cc-number"
required autofocus
value=""
/>
<span class="input-group-addon"><i class="fa fa-credit-card"></i></span>
</div>
</div>
<div class="form-group">
<label for="cardNumber">Your Email Address</label>
<div class="input-group">
<input
type="email"
class="form-control"
name="email"
placeholder="Enter Your Valid Email Here"
required autofocus
value=""
/>
<span class="input-group-addon"><i class="fa fa-envelope-o"></i></span>
</div>
</div>
My suspicious are that the form I'm using (which uses the Stripe API) has a customer error reporting feature, so if for example the customer's card has expired then an error pops up just above the 'form-group' code shown above - and also in the php and javascript there is a reference to .index.php which is at the bottom of the page here:
<script>
$('.close').click(function(){
window.location.href='index.php';
});
</script>
But that's only my hunch....
Any ideas why this page is behaving like this? Thanks!
Answer = remove 'autofocus' - thanks to #Rick