I followed same sample with the code and tried to show validation when user removes the text in the input and show display messages.Unfortunately, when I remove the text field it does not show anything. Could you please check the code and tell me why I can not show the validation message ?
Regards
Alper
<label for="name">SA / Rentennummer 005 :</label>
<input type="text" class="form-control" id="name" required
[(ngModel)]="Input.name" name="name" #name="ngModel">
<div [hidden]="name.valid || name.pristine"
class="alert alert-danger">
name is required
</div>
In The typescript :
Input= { name:'Alper'};
form : FormGroup;
this.form = fb.group({
name : new FormControl({value: null}, Validators.compose([Validators.required, Validators.maxLength(100)]))
});
<form class="form-details" role="form" name="registrationForm" [formGroup]="userForm">
<div>
<div class="row input-label">
<label class="form-label" for="name">First name</label>
<input
[formControl]="form.controls['name']"
type="text"
class="form-control"
id="form"
name="form">
</div>
<div *ngIf="!form.controls['name'].valid">field is required</div>
</div>
</form>
Related
have two controllers, that should give Form (html +Thymeleaf) to Update entity and post new data, after redirect to List Entities;
My Controllers
#GetMapping ("/fromUpdate")
public String updateInstructor (Model model, Long instructorId) {
Instructor instructor = instructorService.loadInstructorById(instructorId);
model.addAttribute("instructor", instructor);
return "views/updateInstructor";
}
#PostMapping ("/update")
public String update (Instructor instructor) {
instructorService.updateInstructor(instructor);
return "redirect:/instructors/index";
}
Html form + Thymeleaf
<div class="col-md-6 offset-3 mt-3">
<form class="form-control" method="post"
th:action="#{/instructors/update}" th:object="${instructor}">
<div class="mb-3 mt-3">
<label class="form-label"> Instructor Id :</label>
<input type="number" name="instructorId" class="form-control"
th:value="${instructor.getInstructorId()}">
</div>
<div class="mb-3 mt-3">
<label for="firstName" class="form-label"> First Name :</label>
<input id="firstName" type="text" name="firstName" class="form-control"
th:value="${instructor.getInstructorFirstName()}">
</div>
<div class="mb-3 mt-3">
<label for ="lastName" class="form-label"> Last Name :</label>
<input id="lastName" type="text" name="lastName" class="form-control"
th:value="${instructor.getInstructorLastName()}">
</div>
<div class="mb-3 mt-3">
<label for="instructorSummary" class="form-label"> Summary :</label>
<input id="instructorSummary" type="text" name="instructorSummary" class="form-control"
th:value="${instructor.getInstructorSummary()}">
</div>
<div class="mb-3 mt-3" th:each ="course: ${instructor.getCourses()}">
<input name="courses" class="form-control"
th:value="${instructor.courses[courseStat.index].getCourseId()}">
</div>
<div class ="mb-3 mt-3">
<input name ="user" class="form-control" th:field="${instructor.user}">
</div>
<button type ="submit" class ="btn btn-primary"> Update </button>
</form>
</div>
When i load update form i give next exception
80 --- [nio-8071-exec-1] .w.s.m.s.DefaultHandlerExceptionResolver : Resolved [org.springframework.web.HttpRequestMethodNotSupportedException: Request method 'GET' is not supported]
Must say, when i set in first controller #GetMapping (value =/update) analogical Url with Post my form load with all data.
If you know where my problem, please say me, tnx!!!
I am a beginner of laravel. I want to edit a record which contains image, but it just show the input type for file same as insert records, instead of displaying the image. I have no ideas how to make it. Any comments are appreciated. Thanks.
Modal
<div class="modal-body">
<form method="POST" id="memberCardForm" name="memberCardForm" class="form-horizontal" enctype="multipart/form-data">
#csrf
<input type="hidden" name="id" id="id">
<div class="form-group">
<label for="">Card Type</label>
<div class="col-sm-12">
<input type="text" class="form-control" id="card_type" name="card_type" maxlength="50" required>
</div>
</div>
<div class="form-group">
<label for="">Description</label>
<div class="col-sm-12">
<input type="text" class="form-control" id="card_desc" name="card_desc" maxlength="50" required>
</div>
</div>
<div class="form-group">
<label for="">Entitlement</label>
<div class="col-sm-12">
<input type="text" class="form-control" id="card_entitlement" name="card_entitlement" maxlength="50">
</div>
</div>
<div class="form-group">
<label for="">Card Image</label>
<div class="col-sm-12">
<input type="file" class="form-control" id="image" name="image" required>
</div>
</div>
<div class="modal-footer">
Close
<button type="submit" id="saveBtn" class="btn btn-success">Save</button>
</div>
</form>
</div>
JS for Edit record
//Edit
$('body').on('click', '.editRecord', function() {
var id = $(this).data('id');
$.get("{{ url('membercards/edit') }}" + '/' + id, function(data) {
$('#exampleModalLabel').html("Edit Member Card");
$('#saveBtn').html('Save');
$('#exampleModal').modal('show');
$('#id').val(data.id);
$('#card_type').val(data.card_type);
$('#card_desc').val(data.card_desc);
$('#card_entitlement').val(data.card_entitlement);
$('#image').val(data.image);
})
});
I'm trying to use Recaptcha v3 on my form but submitting the form only works when Recaptcha is removed.
When Recaptcha is enabled, I can click on the submit button but nothing happens. I don't even get an error message in the console even though I can see the protected by reCAPTCHA logo in the frontend on the bottom right.
I'm using Laravel 6.
My form template looks like this:
<div class="row mt-150">
<div class="col-12 text-center text-white">
<h1>Contact</h1>
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-4 col-sm-12">
<form action="{{route('contact_form')}}" method="POST">
#csrf
<div class="form-group">
<label for="email" class="text-white">Email address</label>
<input type="email" class="form-control" id="email" name="email" required>
</div>
<div class="form-group">
<label for="textarea" class="text-white">Message</label>
<textarea class="form-control" id="textarea" rows="3" name="message" required></textarea>
</div>
<input type="submit"
id="submitButton"
class="g-recaptcha btn btn-primary"
data-sitekey="MY-PUBLIC-KEY"
data-callback='onSubmit'
data-action='submit'
name="submit">
</form>
</div>
</div>
<script src="https://www.google.com/recaptcha/api.js"></script>
There is also an app.js included which contains the captcha callback function:
function onSubmit(token) {
document.getElementById("submitButton").submit();
}
window.onSubmit = onSubmit;
Can someone give me a hint what I'm doing wrong implementing recaptcha?
I tried to do it just like this:
Google reCaptcha v3
This will not work because you are trying to trigger submit() on a button. Give the form an id and then trigger submit() on the form
<form action="{{route('contact_form')}}" method="POST" id="contactForm">
#csrf
<div class="form-group">
<label for="email" class="text-white">Email address</label>
<input type="email" class="form-control" id="email" name="email" required>
</div>
<div class="form-group">
<label for="textarea" class="text-white">Message</label>
<textarea class="form-control" id="textarea" rows="3" name="message" required></textarea>
</div>
<input type="submit"
id="submitButton"
class="g-recaptcha btn btn-primary"
data-sitekey="MY-PUBLIC-KEY"
data-callback='onSubmit'
data-action='submit'
name="submit">
</form>
Then in javascript get the form and trigger submit on it
function onSubmit(token) {
document.getElementById("contactForm").submit();
}
window.onSubmit = onSubmit;
I have this:
<form role="form" method="post" action="validar.php" data-toggle="validator">
<h2>¿Te interesa?<br>
Nosotros te llamamos</h2>
<div class="form-group">
<label for="Nombre">Nombre*</label><input data-error="Debes facilitarnos tu nombre" class="form-control" id="Nombre" name="Nombre" type="text" required />
<div class="help-block with-errors"></div>
</div>
<div class="form-group">
<label for="Empresa">Empresa</label><input class="form-control" id="Empresa" name="Empresa" type="text">
</div>
<div class="form-group">
<label for="Correo">Correo electrónico*</label><input data-error="Debes facilitarnos tu correo electrónico" class="form-control" id="Correo" name="Correo" type="email" required />
<div class="help-block with-errors"></div>
</div>
<div class="form-group">
<label for="Telefono">Teléfono</label><input class="form-control" id="Telefono" name="Telefono" type="tel">
</div>
<div class="form-group">
<label for="Horario">Qué día y hora prefieres</label><input class="form-control" id="Horario" name="Horario" type="text">
</div>
<button type="submit" class="btn btn-image" name="send"><span style="position:relative;top: -20px;">Solicitar información</span></button>
<div class="checkbox">
<label><input type="checkbox" required /><a target="_blank" href="http://www.trisquel.com/privacidad/">Acepto las condiciones</a></label>
</div>
</form>
validar.php recollect all the data (POST) and send and email.
I would like to add ajax/jquery code to show a Sucess Message (f.e: Thxs for all!) bellow the submit buttom when the user clicks in "submit" in the same page that the form and execute validar.php in the index page.
THXS!
// this is the id of the form
$("#idForm").submit(function() {
var url = "validar.php"; // the script where you handle the form input.
$.ajax({
type: "POST",
url: url,
data: $("#idForm").serialize(), // serializes the form's elements.
success: function(data)
{
$("message").text("Success Message");
}
});
return false; // avoid to execute the actual submit of the form.
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form role="form" id="idForm" method="post" action="validar.php" data-toggle="validator">
<h2>¿Te interesa?<br>
Nosotros te llamamos</h2>
<div class="form-group">
<label for="Nombre">Nombre*</label><input data-error="Debes facilitarnos tu nombre" class="form-control" id="Nombre" name="Nombre" type="text" required />
<div class="help-block with-errors"></div>
</div>
<div class="form-group">
<label for="Empresa">Empresa</label><input class="form-control" id="Empresa" name="Empresa" type="text">
</div>
<div class="form-group">
<label for="Correo">Correo electrónico*</label><input data-error="Debes facilitarnos tu correo electrónico" class="form-control" id="Correo" name="Correo" type="email" required />
<div class="help-block with-errors"></div>
</div>
<div class="form-group">
<label for="Telefono">Teléfono</label><input class="form-control" id="Telefono" name="Telefono" type="tel">
</div>
<div class="form-group">
<label for="Horario">Qué día y hora prefieres</label><input class="form-control" id="Horario" name="Horario" type="text">
</div>
<button type="submit" class="btn btn-image" name="send"><span style="position:relative;top: -20px;">Solicitar información</span></button>
<div class="checkbox">
<label><input type="checkbox" required /><a target="_blank" href="http://www.trisquel.com/privacidad/">Acepto las condiciones</a></label>
</div>
<span id="message"></span>
</form>
Use jquery to serialize your form and post it. Give your form an id so you can reference it(like myForm)
var serializedForm = $("#myForm").serialize();
Then post it with an Ajax call(read the jquery ajax docs).
In the success callback of the Ajax call you do the following.
$('#contactDiv').hide();
$('#successDiv').show();
So you'll need to create some divs around the form and another around the success message.
I am using jQuery and form validator plugin and it works fine except one page shown below.
HTML:
<form method="POST" enctype="multipart/form-data" id="frmReg" class="form-horizontal" novalidate="novalidate">
<input type="hidden" name="mode" id="mode" value="insert">
<input type="hidden" name="fileName" id="fileName">
<div class="control-group">
<label id="fileLabel" class="control-label">*File Name</label>
<div class="controls">
<input type="file" name="file" id="file" placeholder="Select file" required="required" class="valid">
</div>
</div>
<div class="control-group">
<label class="control-label">*Package Name</label>
<div class="controls">
<input type="text" name="id.appId" id="appId" placeholder="Type group ID" tabindex="0" class="valid">
</div>
</div>
<div class="control-group">
<label class="control-label">*Application Title</label>
<div class="controls">
<input type="text" name="appName" id="appName" placeholder="Type application name" class="valid">
</div>
</div>
<div class="control-group">
<label class="control-label">*Version</label>
<div class="controls">
**<input type="text" name="id.version" id="version" placeholder="Type version" tabindex="0" class="valid">**
</div>
</div>
<div class="control-group">
<label class="control-label">Description</label>
<div class="controls">
<textarea name="description" id="description" placeholder="Type description" class="valid"></textarea>
</div>
</div>
<div class="modal-footer">
<button aria-hidden="true" data-dismiss="modal" class="btn">Close</button>
<button class="btn btn-primary" type="submit">Submit</button>
</div>
</form>
JS:
$("#frmReg").validate({
ignore: "", //for hidden field
rules: {
version: {
required: true,
number: true
}
},
messages: {
version: {
required: "Enter version number",
number: "Decimal numbers only allowed."
}
}
});
**$("#frmReg").validate().element("#version");**
It works when I use 'version' as the input name but I have to use 'id.version' as input name rather than 'version' because of server-side framework. But when I use the name, the validation code always returns true, even when I type any special characters and alphabets.
How can I still use id.version for the element?
Your answer would be appreciated.
As per the documentation...
Fields with complex names (brackets, dots)
If your form consists of fields using names that aren't legal JavaScript identifiers, you have to quote those names when using the rules option
Simply put quotes around the name containing dots...
$("#frmReg").validate({
ignore: "", //for hidden field
rules: {
'id.version': {
required: true,
number: true
}
},
messages: {
'id.version': {
required: "Enter version number",
number: "Decimal numbers only allowed."
}
}
});
Working DEMO: http://jsfiddle.net/A2ZdL/