I have kendo validation on one div that is working , another div i have AngularJS directive but i could not implement validation and make it requried field. How can i make required field like i have in Business process name ?
so far tried code...
div1.html
<div class="row">
<div class="form-group col-md-6 fieldHeight">
<label for="name" class="col-md-5 required">Business Process Name:</label>
<div class="col-md-7">
<input type="text" class="form-control" id="name"
ng-model="processDTO.processLongName"
placeholder="Process Name" maxlength="256" name="processName"
data-required-msg="Business Process Name is required" required><span
class="k-invalid-msg" data-for="processName"></span>
</div>
</div>
<div class="form-group col-md-6 fieldHeight">
<label for="countries" class="col-md-5 required">Geographic Locations:</label>
<div class="col-md-7">
<div multiselect-dropdown-tree ng-model="nonPersistentProcess.geoLocations" disable-children="true" options="treeviewOptions"></div>
</div>
</div>
</div>
Related
I'm currently creating a web app using Razor Pages. I scaffolded the "Project" Model by clicking on "Razor Pages using Entity Framework (CRUD)" which automatically created a "Create", "Edit", "Delete", and "Details" page for my model. However, on my "Create" page it displays like this:
Create Fields Displaying Vertically:
I have a many properties, so this page gets very long and requires a lot of scrolling. Is there a way to make the fields display horizontally something like this:
Create Fields Displaying Horizontally:
I saw a few examples of how to edit the HTML file to achieve this, but I'm new to HTML and because of the automatically generated code I don't know what I need to change. Here's a snippet of the code:
<div class="row">
<div class="col-md-4">
<form method="post">
<b>General:</b>
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="form-group">
<label asp-for="Project.projectID" class="control-label"></label>
<input asp-for="Project.projectID" class="form-control" />
<span asp-validation-for="Project.projectID" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Project.projectName" class="control-label"></label>
<input asp-for="Project.projectName" class="form-control" />
<span asp-validation-for="Project.projectName" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Project.projectManager" class="control-label"></label>
<input asp-for="Project.projectManager" class="form-control" />
<span asp-validation-for="Project.projectManager" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Project.projectClient" class="control-label"></label>
<input asp-for="Project.projectClient" class="form-control" />
<span asp-validation-for="Project.projectClient" class="text-danger"></span>
</div>
</form>
</div>
</div>
Any ideas of how to change the code so my input fields display horizontally?
By default the Asp.net core Application using Bootstrap style, so, you could try to change the code as below:
<h4>General:</h4>
<hr />
<div class="row">
<div class="col-md-12">
<form method="post">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="row">
<div class="col-md-6">
<div class="form-group row">
<label asp-for="Project.projectID" class="control-label col-md-3"></label>
<input asp-for="Project.projectID" class="form-control col-md-9" />
<span asp-validation-for="Project.projectID" class="text-danger"></span>
</div>
</div>
<div class="col-md-6">
<div class="form-group row">
<label asp-for="Project.projectName" class="control-label col-md-3"></label>
<input asp-for="Project.projectName" class="form-control col-md-9" />
<span asp-validation-for="Project.projectName" class="text-danger"></span>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group row">
<label asp-for="Project.projectManager" class="control-label col-md-3"></label>
<input asp-for="Project.projectManager" class="form-control col-md-9" />
<span asp-validation-for="Project.projectManager" class="text-danger"></span>
</div>
</div>
<div class="col-md-6">
<div class="form-group row">
<label asp-for="Project.projectClient" class="control-label col-md-3"></label>
<input asp-for="Project.projectClient" class="form-control col-md-9" />
<span asp-validation-for="Project.projectClient" class="text-danger"></span>
</div>
</div>
</div>
</form>
</div>
</div>
Then the output as below:
More detail information about Bootstrap style, check Bootstrap 4 Grid System.
<form action="mailto:mail#mail.com" method="post" class="wow fadeInUp" data-wow-delay="0.6s">
<div class="col-md-4 col-sm-6">
<input type="text" class="form-control" placeholder="Naam" name="name">
</div>
<div class="col-md-4 col-sm-6">
<input type="email" class="form-control" placeholder="Email" name="email">
</div>
<div class="col-md-4 col-sm-12">
<input type="text" class="form-control" placeholder="Onderwerp" name="subject">
</div>
<div class="col-md-12 col-sm-12">
<textarea class="form-control" placeholder="Bericht" rows="7" name"message"></textarea>
</div>
<div class="col-md-offset-2 col-md-8 col-sm-offset-2 col-sm-8">
<input type="submit" class="form-control" value="SHOOT MESSAGE">
</div>
</form>
The above code gives the underneath result when I 'shoot the message'.
It should fill in the message with the message from the form, same goes for the subject.
Now the question is: can this be done with HTML 5 only? I know that I can send it with PHP but that is not my question.
If you are able to use JavaScript, the following might come in handy:
Source: MailTo with HTML body
i want make my input field longer as the same 2 fields above him, look the picture please:
My HTML code:
<div class="row">
<div class="form-group col-lg-offset-3 col-lg-3">
<label for="TripNumber">Trip Number</label>
<input type="text" class="form-control" id="TripNumber" placeholder="Trip Number">
</div>
</div>
I failed to do it with the boostrap grid system alone.
I cant change to col-lg-3 is not work, look at the comments.
I had the same issue and I solved adding one of the col- classes in the input itself.
In your case, replace col-lg-3 for col-lg-6 in the div and add col-lg-6 in the input as well:
<div class="row">
<div class="form-group col-lg-offset-3 col-lg-6">
<label for="TripNumber">Trip Number</label>
<input type="text" class="form-control col-lg-6" id="TripNumber" placeholder="Trip Number">
</div>
</div>
Try this Code............
<div class="row">
<div class="form-group col-lg-offset-3 col-lg-6">
<label for="TripNumber">Trip Number</label>
<input type="text" class="form-control" id="TripNumber" placeholder="Trip Number">
</div>
</div>
Try this
<div class="row">
<div class="form-group col-lg-12">
<label for="TripNumber">Trip Number</label>
<input type="text" class="form-control" id="TripNumber" placeholder="Trip Number">
</div>
</div>
Replace
col-lg-3
with
col-lg-6
in class attr
I want to disabled Proxy input field for selection till Attestor is selected , Currently both fields are readOnly, if attestor is not selected user should not be able to select Proxy. I am new to angularJS please help how we can implement this logic using ng-model.
main.html
<div class="row">
<div class="form-group col-md-6">
<label for="attestorWorker" class="col-md-4">Attestor:</label>
<div class="col-md-8">
<input type="text" class="form-control" id="attestorWorker" required
ng-model="attestorDTO.attestorWorker" name="attestorWorker"
ng-click="openAttestorSearch()" readonly="readonly"/>
</div>
</div>
</div>
<div class="row">
<div class="form-group col-md-6">
<label for="proxyWorker" class="col-md-4">Proxy :</label>
<div class="col-md-8">
<input type="text" class="form-control" id="proxyWorker" required
ng-model="attestorDTO.proxyWorker" name="proxyWorker"
ng-click="openProxySearch()" readonly="readonly"/>
</div>
</div>
</div>
You can use the ng-disabled attribute.
<input type="text" class="form-control" id="proxyWorker" required
ng-model="attestorDTO.proxyWorker" name="proxyWorker"
ng-click="openProxySearch()" readonly="readonly"
ng-disabled="!attestorDTO.attestorWorker"/>
Changing:
ng-disabled="!attestorDTO.attestorWorker"
to the condition that you want it to be disabled
So I'm working in bootstrap for the first time and I'm making a form, like so:
<div class="input-group col-xs-2">
<label>Voornaam:</label>
<input type="text" class="form-control" placeholder="Voornaam">
</div>
<div class="input-group col-xs-2">
<label>Achternaam:</label>
<input type="text" class="form-control" placeholder="Achternaam">
</div>
<div class="input-group">
<label for="adresCaptain" class="control-label">Straatnaam + nr:</label>
<div>
<div class="form-inline">
<div class="form-group col-xs-9">
<input type="text" class="form-control" id="streetCaptain" placeholder="Straat"/>
</div>
<div class="form-group col-xs-3">
<input type="number" class="form-control" id="houseNrCaptain" placeholder="Nr"/>
</div>
</div>
</div>
</div>
Now, I've got a problem with the indentation of the "form-inline" part. For some reason, it's more indented than the other parts of the form.
image of result: http://puu.sh/g874J/2579b314e4.png
Any idea why this is the case and how I can make it so that the indentation is the same for every part of the form?
Your col-xs-X class adds an extra padding to div.