How can we show error message on form validation on joomla 2.5 in the same way as email validation etc? with the tool tip?
I have included
JHtml::_('behavior.formvalidation');
JHtml::_('behavior.tooltip');
and I have a script
$(document).ready(function () {
var msg = new Array();
document.formvalidator.setHandler('phone', function (value) { return (value != '123'); } );
});
and My input filed is like
<input name="jform[contact_phone]" type="text" id="jform_contact_phone" class='validate-phone'/>
I am getting the tooltip for email field validation and required filed validation, but I can not include numeric validation and I could not implement a tooltip message for my custom phone number field.
I am using joomla 2.5
Please check here for custom validation
http://docs.joomla.org/Client-side_form_validation
You have to add like below:
window.addEvent('domready', function(){
document.formvalidator.setHandler('birth', function(value) {
regex=/^\d{4}-\d{2}-\d{2}$/;
return regex.test(value);
});
});
If its only for numeric click below URL and try this also:
Validate phone number in joomla 2.5
Related
I have one Laravel Livewire model open as bellow code
public function confirmItemAdd()
{
$this->resetValidation();
$this->confirmingItemAdd = true;
}
and my model window code in blade is
<x-jet-dialog-modal wire:model="confirmingItemAdd">
I have one select2 in model and want to set value of select2 on variable name $s2v
After search I findout that
$('.select2').val(s2v).trigger('change');
how can I set value of select2 on load on model?
Thanks
You can trigger a browser event from the livewire component and listen for that event and change the select2 value accordingly (assuming the select2 part is wire:ignored).
public $s2v = 'Test value';
public function confirmItemAdd()
{
$this->resetValidation();
$this->confirmingItemAdd = true;
$this->dispatchBrowserEvent('change-select2', $this->s2v);
}
in your layout file or with the stack in layout file you can listen for this event and trigger the change for the select2 as below,
<script>
$(window).on('change-select2', (e) => {
$('.select2').val(e.detail).trigger('change');
});
</script>
Note e.detail is the $s2v value passed from the livewire component.
And what validation error is giving to you? you are reseting the validation error before the dispatchBrowserEvent...seem that even by JS you are changing the select2 value the property doesn't
EDITED
Ok, first a have a particular issue with select2 rendering after each refresh and find this solution. In the component a have this:
public function hydrate()
{
$this->emit('select2');
}
and in blade parent or script section
<script>
$(document).ready(function() {
window.initSelectCompanyDrop=()=>{
$('#selectCompany').select2({
placeholder: '{{ __('locale.Select a Company') }}',
allowClear: true});
}
initSelectCompanyDrop();
$('#selectCompany').on('change', function (e) {
livewire.emit('selectedCompanyItem', e.target.value)
});
window.livewire.on('select2',()=>{
initSelectCompanyDrop();
});
});
</script>
If your issue with error bag persist, so you have to look into the kind of validation you're doing. In other case, I define global $message for a validation message but only works for $this->validate. Once I need redefine the validation, using Validator::make I have to create a new var $message for that inside the method
I am creating dynamic Check Boxes in runtime. my requirement is have to validate atleast one checkbox checked or not. am doing this using springJS. But to validate i have to pass checkBox Id to spring Validation, But this ID array creating in runtime. how can i achieve this? i tried all solutions but it did'nt worked for me. i am doing like this it was working if i hardcode checkbox id.
<script type="text/javascript">
Spring.addDecoration(
new Spring.ElementDecoration({
elementId: '_CheckBox_ids',
widgetType: 'dijit.form.CheckBox',
widgetModule: 'dijit.form.CheckBox',
validate: function () {
if (dojo.query("#roo_apiUser_profile > input[type=checkbox]", 'dijit.form').filter(function (n) {
return n.checked;
}).length > 0) {
return true;
} else {
alert('choose at least one profile');
return false;
}
},
widgetAttrs: {
required: true
}
}));
</script>
You may add the onsubmit attribute in your form tag and call a function that does the validation on checkboxes.
Alternately, you may create your own extension of AbstractElementDecoration (defined in spring.js) using dojo.declare and pass to the validate attribute a function that will do the checkboxes validation for you. For elementId you may pass in the id of a div element that contains all the checkboxes. Spring.ValidateAllDecoration calls Spring.validateAll function. Make sure you do the necessary tweaking in your AbstractElementDecoration extension so that there is no exceptions in Spring.validateAll.
I have a web form that does client validation using Kendo Validator. Once client validation succeeds the form values are sent to a web service that does additional validation and either saves the data or sends back a JSON object of error messages keyed by form field. These field names match the data-for attributes on the validator elements. Is there a way to display these errors using Kendo Validator?
I realize you can setup a custom rule to do server-side validation per field. This is about validating all the fields at once and displaying multiple errors.
You can display multiple errors using AddModelError method, as desribed in this topic http://blogs.telerik.com/kendoui/posts/13-08-29/handling-server-side-validation-errors-in-your-kendo-ui-grid#adding-server-side-vaildation
You can attach to response event and call function which show validation errors when some errors was returned from server.
Here is javascript section which can do it:
validationMessageTemplateForReplace = kendo.template(
'<div class="k-widget k-tooltip k-tooltip-validation k-invalid-msg field-validation-error" style="margin: 0.5em; display: block; " data-for="#=field#" data-valmsg-for="#=field#" id="#=field#_validationMessage">' +
'<span class="k-icon k-warning"> </span>#=message#<div class="k-callout k-callout-n"></div></div>');
function onResponseEnd(response) {
if (response.errors) onError(response.errors, $('#myForm'));
}
function onError(errors, element) {
for (var error in errors) {
addValidationMessage(element, error, errors[error].errors);
}
}
function addValidationMessage(container, name, errors) {
//add the validation message to the form
var found = container.find("[data-for=" + name + "],[data-val-msg-for=" + name + "],[data-valmsg-for=" + name + "]");
if (found.length > 0) {
found.replaceWith(bs.validationMessageTemplateForReplace({ field: name, message: errors[0] }));
return true;
}
return false;
}
Maybe this example project will be also helpfull for you. It's assiociated with grid popup editing, but shows mechanism which you want to achieve.
I have form in yii that validates the form field. When I submit the form it shows the errors.
But when the value of the field with the validation error is updated, the error still present.
I want the message to clear. How should i clear the validation error?
Below the form widget code
<?php $form = $this->beginWidget('CActiveForm', array(
'id'=>'user-form',
'enableAjaxValidation'=>true
)); ?>
In my form I echo the validation error like the code below:
<?php echo $form->error($model, 'firstname'); ?>
I tried the solution from this problem
Trigger Yii field validation onchange of another field
$('#user-form').change(function(){
var settings = $(this).data('settings');
$.each(settings.attributes, function () {
this.status = 2; // force ajax validation
});
$(this).data('settings', settings);
// trigger ajax validation
$.fn.yiiactiveform.validate($(this), function (data) {
$.each(settings.attributes, function () {
$.fn.yiiactiveform.updateInput(this, data, $(this));
});
});
});
But the error message is still not cleared. I have confirmed that the ajax request is sent and there are response as its showed on the firebug console.
[EDIT]
It seems those validation errors for "select" fields are the ones that are not updated/cleared only.
[EDIT]
All the validation errors that are printed/echo after the form is submmitted will not disappear even if the value is supplied or change to satisfy the validation rules.
Place this just above the // trigger ajax validation comment:
$('.errorSummary, .errorMessage').hide();
This should reset the errors before they get re-validated.
In my case I added the code below on the page to remove the red highlight on input field on the form.
$('#user-form select, #user-form input').change(function(){
field = $(this).attr('id');
if($('#'+field+'_em').text() == ''){
$(this).removeClass('error');
}
});
I also add the updateInput function on framework/web/js/source/jquery.yiiactiveform.js so it will remove the validation error for certain field.
if(hasError == false){
$error.toggle(hasError);
$el2 = form.find('#' + attribute.id);
$el2.removeClass(attribute.errorCssClass);
}
I am not sure if this the proper solution but it works for me.
With your form widget code, i don't think ajax validation won't work.
To enable Ajax validation on form you should configure your widget as below,
<?php
$form = $this->beginWidget('CActiveForm', array(
'id'=>'user-form',
'enableAjaxValidation' => true,
'clientOptions' => array(
'validateOnSubmit' => true,
),
));
?>
With this configuration, your form will be validated when form field lost the focus(blur).
Try it, It will give the solution for your problem.
My views have limited space for validation messages and because of this i want to output a asterisk instead of the validation message. The following blog outlines how to do this by adding a extra parameter to the validation helper:
http://www.erroronlineone.com/2011/09/12/mvc3-display-an-asterisk-for-error-message/
#Html.ValidationMessageFor(model => model.Name, "*")
But I want to output a asterisk or an image and using the HTML title attribute have a pop up displaying the validation message. Would I have to change the way unobtrusive validation works? Or do you have a better idea? Thanks
One way, if you are game, is to edit the unobtrusive validation javascript file.
The error message is displayed in the onError function. Here you can change the message element any way you wish. For example (unminified):
function onError(error, inputElement) { // 'this' is the form element
var container = $(this).find("[data-valmsg-for='" + escapeAttributeValue(inputElement[0].name) + "']"),
replace = $.parseJSON(container.attr("data-valmsg-replace")) !== false;
container.removeClass("field-validation-valid").addClass("field-validation-error");
error.data("unobtrusiveContainer", container);
if (replace) {
container.empty();
// Set the "title" attribute and change the text to an asterisk.
error.prop("title", error.text());
error.text("*");
error.removeClass("input-validation-error").appendTo(container);
}
else {
error.hide();
}
}