I am trying to assert that a div containing a required checkbox adds the class "has-error" when submit is clicked before the element is filled out. Here is what the test output looks like before clicking:
`<body>
<div>
<div
class="sheet sheet-xl mb-4 sheet-fed-bordered"
>
<form>
<div
class="form-group"
>
<div
class="row"
>
<div
class="col-md-6 col-lg-6"
>
<input
aria-describedby=""
aria-invalid="false"
aria-labelledby=""
class="form-check-input"
id="test"
name="test"
required=""
type="checkbox"
value=""
/>
<label
class="form-check-label"
for="test"
>
Test
</label>
<div
aria-live="polite"
class="form-feedback-group"
id="test-errors"
/>
</div>
</div>
</div>
<button
class="btn btn-primary fed-focus-outline"
data-testid="form-wrapper-submit-btn"
type="submit"
>
Submit
</button>
<hr />
<pre>
{
"test": false
}
</pre>
</form>
</div>
</div>
</body>`
What is the best way to get a hold of the third div with class="form-group" to later test that the class changes to "form-group has-errors"?
I have tried:
screen.getByRole("div"), screen.getByRole("div", {class: "form-group"}, screen.getByRole("div", {className: "form-group})
And many other variations of the above and of findByRole, queryByRole, etc...
Related
in a Nuxt site I have a form with a field of type "file", and a Name, Email and Message fields.
Name, Email and Message are working flawlessy everytime, instead the "file" field ONLY WORKS when the first page visited is the page where the form is (or it's reloaded). If a user, let's say, land on the homepage and only then reach the form page, the message sent from the form will not contain the file that was attached.
What can cause this? I've already tried to reset the form on the mounted hook, or reset only the "file" field but with no luck.
This is the form component code "TheFormJob.vue":
<template>
<div>
<form name="job" netlify-honeypot="bot-field" method="post" action="/success" data-netlify="true">
<input type="hidden" name="form-name" value="job" >
<p class="hidden">
<label>Don’t fill this out: <input name="bot-field"></label>
</p>
<div class="form">
<div class="form__name">
<input class="form__field" name="name" id="name" :placeholder="$t('contatti.nomeForm')" required >
</div>
<div class="form__email">
<input class="form__field" type="email" name="email" id="email" placeholder="Email*" required >
</div>
<div class="form__upload">
<input class="form__field" type="file" name="fileToUpload" id="fileToUpload" accept=".doc, .docx, .pdf" required>
</div>
<div class="form__textarea">
<textarea class="form__field" name="message" id="message" :placeholder="$t('contatti.messaggioForm')" required></textarea>
</div>
<div class="form__privacy extra-mt">
<label><input type="checkbox" name="privacy" required> {{$t('contatti.privacy')}}</label>
</div>
<div class="form__send extra-mt">
<button class="default-button" type="submit" value="Invia" >{{$t('contatti.invia')}} </button>
</div>
</div>
</form>
</div>
</template>
<script>
export default {
mounted(){
const dis = this
const uploadField = document.getElementById("fileToUpload");
uploadField.onchange = function() {
if(this.files[0].size > 1048576){ // 1MB
alert(dis.$t('lavora.fileAlert'));
}
}
}
}
</script>
In the page "index.vue":
<template>
<div>
<div class="container">
<div class="first row extra-mt5-md is-center">
<div class="col-12 col-4-md text-center" style="padding: 2rem 0">
<h1>{{$t('lavora.title')}}</h1>
</div>
</div>
<div class="second row">
<div class="col-12 col-4-md image" />
<div class="col-12 col-8-md content">
<p>{{$t('lavora.p1')}}</p>
<TheFormJob class="extra-mt5" />
</div>
</div>
<div class="third row">
<div class="col-12">
<nuxt-link class="default-button-full" :to="localePath('contatti')">{{$t('contatti.title')}} → </nuxt-link>
</div>
</div>
</div>
</div>
</template>
Description
I want to have two buttons to edit and delete an identity role. The edit button works but if I want to delete a role the site is reloading but nothing happens.
The post function will not be called. Is there another way to have a post form in another post form?
Code
<div class="row mb-3">
<div class="col-12">
<div class="card">
<div class="card-body">
<h4 class="card-title">Rollennamen bearbeiten</h4>
#using(Html.BeginForm("EditRole", "Administration", FormMethod.Post)) {
<div class="form-group row">
<label asp-for="EditRole.RoleName" class="col-sm-12 col-md-3"></label>
<div class="col-sm-12 col-md-9">
<input asp-for="EditRole.Id" type="hidden" value="#roles.Id" />
<input asp-for="EditRole.RoleName" class="form-control" value="#roles.Name" />
<span asp-validation-for="EditRole.RoleName" class="text-danger"></span>
</div>
</div>
<div class="d-flex flex-row-reverse">
<button type="submit" class="btn btn-success">Rolle bearbeiten</button>
#using(Html.BeginForm("DeleteRole", "Administration", FormMethod.Post)) {
<input name="id" type="hidden" value="#roles.Id" />
<button type="submit" class="btn btn-danger mr-2">Rolle löschen</button>
}
</div>
}
</div>
</div>
</div>
</div>
You could handle multiple submit in one form use asp-action like
#using (Html.BeginForm(FormMethod.Post))
{
<div class="d-flex flex-row-reverse">
<input type="submit" value="Save" class="btn btn-success" asp-controller="Administration" asp-action="EditRole" />
<input type="submit" value="Delete" class="btn btn-danger" asp-controller="Administration" asp-action="DeleteRole" />
</div>
}
I am using Spring.
The method in my RESTController is this,
http://localhost:8080/delivery-api/training/submit. It is able to save hard code values into database.
This is part of my html form, it can be open up using this URL: http://localhost:8080/delivery-web/training/apply.
<form th:object="${applyForm}" class="form-horizontal" role="form" method="post" action="http://localhost:8080/delivery-api/training/submit" >
<div class="form-group">
<label class="col-sm-3 control-label no-padding-right"
for="form-field-1" > Country </label>
<div class="col-sm-9">
<input type="text" id="form-field-1" placeholder="Country"
class="col-xs-10 col-sm-7" th:field="*{country}" />
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label no-padding-right"
for="form-field-1"> Fee </label>
<div class="col-sm-9">
<input type="text" id="form-field-1" th:field="*{Fee}" class="col-xs-10 col-sm-7" />
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label no-padding-right"
for="form-field-1"> Start Date </label>
<div class="col-sm-9">
<input type="date" id="form-field-1" th:field="*{startDate}"
class="col-xs-10 col-sm-7" />
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label no-padding-right"
for="form-field-1">End Date </label>
<div class="col-sm-9">
<input type="date" id="form-field-1" th:field="*{endDate}"
class="col-xs-10 col-sm-7" />
</div>
</div>
<br> <br>
<button class="btn btn-info" type="submit">
<i class="ace-icon fa fa-check bigger-110"></i> Submit
</button>
</div>
</div>
</form>
When I click on submit, it can be directed to http://localhost:8080/delivery-api/training/submit and insert the hard coded values into database, but it did not direct to my application-form.html page after that.
My controller
#PostMapping(value = "/apply")
public String apply(#Valid #ModelAttribute("applyForm") DeliveryApplicationForm applyForm, BindingResult errors, Model model) {
model.addAttribute("applyForm", applyForm);
return VIEW_PATH + "application-form";
}
I would like to render html page and also pass data from my form to RESTController method through a controller after I click on the submit button in my html page.
May I know how I can do it?
What I am trying to do is -
I am trying to add a form to the existing form but the data not getting stored
what the error coming up -
in the console its showing form connection is missing.. how can I connect it with following code I have?
The code behind the click is something like this:
<button type="submit" class="btn btn-default" routerLink="../viewemployee" [disabled]="empForm.invalid">Add Employee</button>
please refer the link below for the code.. need help to move on from this to solve other tasks.
If it is required to post the code here as well, I will do.Please answer and respond.
Thanx in advance.
How to connect the form in angular routing
createemployee.component.html
<h2>Add Employee:</h2>
<form class="form-horizontal" #empForm="ngForm">
<div class="form-group">
<label class="control-label col-sm-2" for="name">Name:</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="name" minlength="4" maxlength="10" pattern="^[A-Za-z0-9]*[A-Za-z0-9][A-Za-z0-9]\S*$" [(ngModel)]="model.name" placeholder="Enter Your Name"
#name="ngModel" required/>
<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.pattern">
No Spaces
</div>
<div *ngIf="name.errors.minlength">
Name must be at least 4 characters long.
</div>
</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="position">Position:</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="position" minlength="4" maxlength="10" pattern="^[a-z]*$" [(ngModel)]="model.position" placeholder="Enter your position"
#position="ngModel" required />
<div *ngIf="position.invalid && (position.dirty || position.touched)" class="alert alert-danger">
<div *ngIf="position.errors.required">
Position is required.
</div>
<div *ngIf="position.errors.pattern">
Only Alphabets are must be entered
</div>
<div *ngIf="position.errors.minlength">
Position must be at least 4 characters long.
</div>
</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="salary">Salary:</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="salary" pattern="[0-9]*"
minlength="5" maxlength="7" [(ngModel)]="model.salary" placeholder="Enter Salary" #salary="ngModel" required />
<div *ngIf="salary.invalid && (salary.dirty || salary.touched)" class="alert alert-danger">
<div *ngIf="salary.errors.required">
Salary is required.
</div>
<div *ngIf="salary.errors.minlength">
Salary must be in 5 numbers.
</div>
<div *ngIf="salary.errors.maxlength">
Salary must not be exceeded morethan 7 numbers.
</div>
<div *ngIf="salary.errors?.pattern">Only numebers should be typed
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default" routerLink="../viewemployee" [disabled]="empForm.invalid">Add Employee</button>
<button type="button" class="btn btn-default" routerLink="../home">Cancel</button>
</div>
</div>
</form>
You could change your component as follows:
Add event handler to the form:
<form (ngSubmit)="continue()">
Handle the routing in code:
continue() {
...
this.router.navigateByUrl("../viewemployee");
}
You need to inject the router:
constructor(private router: Router) {}
I am Trying to Create a simple basic form , I am unable to achieve Horizontal layout when added input-append class to the form , it kicks the second input box to be displayed in the same line ? wondering where the CODE ERROR is ? please suggest what is causing issue
<body>
<div class="container">
<hr/>
<form class="form-horizontal">
<!--<span class="offset2">Sign Into the Email</span>-->
<div class="control-group">
<div class="controls"><span>Welcome to My Email</span></div>
</div>
<div class="control-group input-append">
<label for="emailid" class="control-label">Email id</label>
<div class="controls">
<input type="text" />
<span class="add-on">#</span>
</div>
</div>
<div class="control-group input-append">
<label for="passwd" class="control-label">Password</label>
<div class="controls">
<input type="password" />
<span class="add-on">***</span>
</div>
</div>
<div class="control-group">
<div class="controls" >
<label class="checkbox">
<input type="checkbox" />Remember Me
</label>
<button class="btn">Sign In</button>
</div>
</div>
</form>
</div>
<script src="js/jquery.js"></script>
<script src="js/bootstrap.js"></script>
</body>
I would just put the input-append in an inner div
<div class="control-group">
<div class="input-append">
<label for="emailid" class="control-label">Email id</label>
<div class="controls">
<input type="text" /> <span class="add-on">#</span>
</div>
</div>
</div>
Check this fiddle
.input-append has a display: inline-block Hence the issue