I am trying to get a hand of vee-validate 3. A lot has changed on version 3.
Problem is the error messages do not have the specific field name. Below is the code that i have in a laravel blade file:
<validation-provider rules="email" v-slot="{ errors }">
<input type="text"
class="input"
name="email"
v-model="email">
<span>#{{ errors[0] }}</span>
</validation-provider>
When i strart typing in the input field, the error message prints inside the span tags, but it does not have the field name, rather a generic 'field', such as below:
{field} is not valid.
Anybody knows how to get this working?
Thanks,
I found it in the docs. All you need to do is add a name property to the validation-provider component like below:
<validation-provider rules="email" name="...add_input_field_name_here..." v-slot="{ errors }">
Related
I used laravel validator.
I have a form wih 2 fields
If i fill one field "NAME" and i leave the other "SURNAME" empty pressing SAVE button of the form appears required alert message on SURNAME but the name inserted in the NAME field became empty! And i think form send data anyway.why?I aspect that form doesn't send datas
In the value attribute of each input you need to echo old("the-input-name") so it can retain the previous input before the error
<input name="name" value="{{old('name')}}" class="" />
You should use old('NAME') to get the value of the field after the validation fails, blade example:
<input type="text" value="{{ old('NAME') }}" />
An example In case of update forms you should display the original value from the database unless there's an error:
<input type="text" value="{{ old('NAME') ?? $your_entry->value }}" />
Take a look at the documentation for more details
I am trying to insert text into CKEditor and looks like it's not working.
<textarea name="editor2" class="form-control" id="announcementEditBody" rows="3" placeholder="Enter ..."></textarea>
CKEDITOR.replace('editor2');
$('editor2').val(response['aBody']);
Neither does CKEDITOR.instances.editor2.setData(); work, neither .insertText neither ['editor2'], it gives me this error Unable to get property 'setData' of undefined or null reference.
In CKEditor documentation they wrote about use of ID, so try to set data this way -
CKEDITOR.instances.announcementEditBody.setData();
OR
CKEDITOR.instances['announcementEditBody'].setData();
Using Thymeleaf + Spring and form validation, I want to display errors that are related to a field next to this field.
<input type="text"
th:field="*{companyName}" class="form-control"
placeholder="Code client" th:errorClass="'error'"/>
If the field has an error, the class "error" is applied indeed. But is there an easy way to display also the validation error of the field?
Use this code to display error:
<p class="alert alert-danger" th:if="${#fields.hasErrors('companyName')}" th:errors="*{companyName}"></p>
I'm using Angular $http (http://docs.angularjs.org/api/ng.$http) to submit a form. The server returns JSON:
[{
"hasValidationErrors": true,
"validationErrors": {
"inputNameAttributeValue": "Error Message 1",
"anotehrInputNameAttributeValue": "Error Message 2"
}
}]
Once I receive the JSON response, how do I notify Angular that certain form fields are in an error state so that it automatically changes the view to show error messages?
For example, if I use this markup (from http://www.ng-newsletter.com/posts/validations.html):
<div class="row">
<div class="large-12 columns">
<label>Your name</label>
<input type="text"
placeholder="Name"
name="inputNameAttributeValue"
ng-model="signup.name"
ng-minlength=3
ng-maxlength=20 required />
<div class="error"
ng-show="signup_form.name.$dirty && signup_form.name.$invalid">
<small class="error"
ng-show="signup_form.name.$error.required">
Your name is required.
</small>
<small class="error"
ng-show="signup_form.name.$error.minlength">
Your name is required to be at least 3 characters
</small>
<small class="error"
ng-show="signup_form.name.$error.maxlength">
Your name cannot be longer than 20 characters
</small>
</div>
</div>
</div>
I'm looking for a solution that works with my existing data binding markup in my html doc.
I can change the markup, but I don't want to have two separate sections of markup for each form input (one for client side validation and another for validation after the JSON response).
Update:
For example, if required form fields have not been touched by the user
before the form is submitted, they will not show error messages. So,
my goal is that upon form submission, all form fields are validated
and show validation messages if needed.
That's because ng-show is triggered by both $dirty and $invalid flag.
You can manually set all $dirty of input fields to true when ngSubmit fired.
But, in the case the user has tampered with the form, the JSON
response from the server should be used to add validation messages as
well.
If validation failed on server, just bring these tampered values back to angular models on client and use $apply if needed. AngularJS should do the rest of work.
Simulating example: http://jsfiddle.net/djpV8/4/
Origin:
how about set error messages to the scope and simply display it when it's defined:
scope.errorMessages = returnedJson.validationErrors;
just add a block for displaying custom message from server
<!-- place error messages next to corresponding input fields. -->
<small class="error"
ng-show="errorMessages.inputName"
ng-bind="errorMessages.inputName"></small>
The Grails 2.0.4 documentation for validation shows you how to display error messages at the top of the page and how to add a css class to an element if a field is invalid, but it doesn't tell you how to display the error message next to the fields themselves, something like this:
-----------------------
Name: | | You must enter a name!
-----------------------
How do you retrieve the specific error message for an invalid field and then display it next to the field it's for?
Actually, the documentation does show how to do this, it just isn't overly clear that this is what they mean:
<g:renderErrors bean="${book}" as="list" field="title"/>
If you specify the field attribute, it will only render error(s) for that field. So then it is just up to you to write the HTML accordingly.
<input type="text" ... /> <g:if test="${bean.hasErrors}"><g:renderErrors bean="${book}" as="list" field="title"/></g:if>
It can get as simple or as complicated as you would like it and while I generally like grails plugins, this just seems simple enough to do without one and you have more control over the markup.
I use the Grails Fields plugin to do this, and it works a treat.
It makes it easy to create default templates for form field rendering. For example I have the following in grails-app/views/_fields/default/_field.gsp:
<%# page defaultCodec="html" %>
<div class="control-group${invalid ? ' error' : ''}">
<label class="control-label" for="${property}${index ?: ""}">${label}</label>
<div class="controls">
<%= widget.replace("id=\"${property}\"", "id=\"${property}${index ?: ""}\"") %>
<g:if test="${invalid}"><span class="help-inline">${errors.join('<br>')}</span></g:if>
</div>
</div>
As you can see from the HTML the errors are displayed inline. Here is part of my login form:
<g:form controller="home" action="login" >
<f:field bean="user" property="email"/>
<f:field bean="user" property="password">
<g:field type="password" name="${property}" value="${value}"/>
</f:field>
</g:form>
Here is the custom error in context, wrapped around username field. This will do what you want.
<dt>User Id</dt>
<dd><g:textField name="username" value="${user?.username}"/>
<g:hasErrors bean="${user}" field="username">
<g:eachError bean="${user}" field="username">
<p style="color: red;"><g:message error="${it}"/></p>
</g:eachError>
</g:hasErrors>
</dd>
I would recommend going with Jquery validation plugin. There's several Grails plugin about this, but they are a bit out-dated. Besides, I think this task is pretty simple for using another plugin.