This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center.
Closed 10 years ago.
I am using the jQuery Validate() plugin. It's been working just fine, however, I would like to Hightlight the input that has the error in it AFTER SUBMIT. I have tried the:
$(".selector").validate({
highlight: function(element, errorClass, validClass) {
$(element).addClass(errorClass).removeClass(validClass);
$(element.form).find("label[for=" + element.id + "]")
.addClass(errorClass);
},
unhighlight: function(element, errorClass, validClass) {
$(element).removeClass(errorClass).addClass(validClass);
$(element.form).find("label[for=" + element.id + "]")
.removeClass(errorClass);
}
});
...from the http://docs.jquery.com/Plugins/Validation/validate#options page, but am not able to get it to work. Do I need to create the errorClass and validClass css somewhere? does it know which Element somehow? I am a little lost.
Thanks for ideas.
EDIT: Maybe I need to look at my question more closely! I have a field that has a spam deal in it that is equal to 12, but if the user puts in 11, the form tells me there is an error, but doesn't hightlight the input that HAS the error. It will tell me it's required, but not show it if the answer is wrong... any thoughts??
If I understand well, here you have what you need.
The plugin automatically add the class error for those fields with invalid values and add the class valid when the input is correct.
You'd have to assign proper css styles to class error to achieve what you need.
For instance:
input.error {
border:1px dotted red;
}
I ended up using PHP to check if there was an error. The JS was only validating before the form reloaded.
Related
As per all my post, I just want to make it known that I am still new to Laravel + VueJS, so please be as detailed as possible when posting your answers or comments. Thanks.
I am using Vue's router.push() to retrieve pages. Example code as follows:
editHandler(id) {
let self = this
self.$router.push({ name: 'inventory/Suppliers/Edit', params: { id }
})
}
I planned to add a loading overlay on the onClick event but I need help to check when the component/content has been loaded so that I can hide the loading overlay. Anyone can help me how I can achieve this? Thanks.
This question already has answers here:
facebook social plug-in not showing up when added dynamically
(2 answers)
Closed 6 years ago.
I had lazy loading on my page and was trying to place a share button in one of the elements but it won't display for some reason. I encountered this issue a day back and spent few hours trying to figure why the FB share buttons won't load. I couldn't find any issues here as well so I thought I'll post the case along with the solution so someone in need may save some time.
I figured that the social media share buttons make a request through the script to load html element like the image etc for loading the buttons. So when you load a page through ajax, you must re initiate the FB object before you use it in your call for the share button.
function loadFacebook()
{
if (typeof (FB) != 'undefined') {
FB.init({ status: true, cookie: true, xfbml: true });
} else {
$.getScript("http://connect.facebook.net/en_US/all.js#xfbml=1", function () {
FB.init({ status: true, cookie: true, xfbml: true });
});
}
}
Calling the above function just before the new page loads did the job for me. You can go through this wonderful article on Lazy Load Social Media Buttons for more details. I found the solution in the same article.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I have a WebGrid in a cshtml view and i'm using the ajaxUpdateContainerId parameter to page/sort it using AJAX. But, each time i click on a link to page/sort the WebGrid, the href is changing and the querystring add a "__swhg" parameter.
Please refer the attached image
And the querystring just keep growing like this each time I click on the sort/pager, the "__swhg" parameter keep growing because "href" attributes in the WebGrid are adding this to the simple "?sort=&sortdir=" or "?page=".!
This parameter represents an unique timestamp and is added to each url on purpose. Since the AJAX requests are using GET verb, those requests might be cached by the browser. This means that when the user clicks on the links, your server might never be reached. The parameter ensures that the responses are not cached, because each time you get an unique url. Currently this is hardcoded in the WebGrid and there's no way to disable it.
Of course if for some reason you want to shoot yourself in the foot and remove this parameter one possibility is to subscribe to a custom AJAX callback:
var grid = new WebGrid(
Model,
ajaxUpdateContainerId: "grid",
ajaxUpdateCallback: "callback"
);
in which you could replace all links and remove the __swhg parameter:
function callback() {
$('a[data-swhglnk="true"]').attr('href', function () {
return this.href.replace(/&__swhg=[0-9]{13}/, '');
});
}
I have textarea which is required field. I've found post suggesting that Dojo doesn't have validation for Textarea, but in Dojo 1.9, there's an argument 'required'.
I've done the following:
new Textarea({required:true, value:""}, query('[name=description]')[0])
but the effect isn't what I've expected. The texarea has red border always, even if the field wasn't focused (as opposite to, for example, ValidationTextBox). But when I call:
form.validate()
the validation is passed even if the texarea is empty.
Is it possible to get Textare behave the same as in ValidationTextBox, or as for now, the validation for that component is not yet ready and I'd have to write custom version (as in linked post) or wait for next Dojo?
I've done it using mixin of SimpleTextArea and ValidationTextArea:
define(["dojo/_base/declare", "dojo/_base/lang", "dijit/form/SimpleTextarea", "dijit/form/ValidationTextBox"],
function(declare, lang, SimpleTextarea, ValidationTextBox) {
return declare('dijit.form.ValidationTextArea', [SimpleTextarea, ValidationTextBox], {
constructor: function(params){
this.constraints = {};
this.baseClass += ' dijitValidationTextArea';
},
templateString: "<textarea ${!nameAttrSetting} data-dojo-attach-point='focusNode,containerNode,textbox' autocomplete='off'></textarea>"
})
})
See also my answer in Dojo validation of a textarea
The power of Dojo lies in extending it with ease. If you really need the required functionality, then implement it. If you design it well, there should be no problem if it actually gets implemented in a new release of Dojo.
If you really want to know if such a feature exists or is in development I suggest looking at http://bugs.dojotoolkit.org. Besides, you can always contribute to the code, that's what open source is meant for.
I would like to add to the answer of Donaudampfschifffreizeitfahrt
instead of "this.baseClass += ' dijitValidationTextArea';"
I would do
this.baseClass = this.baseClass.replace('dijitTextBox', 'dijitValidationTextArea');
because
• we do not need the TextBox class if we have got a textarea mixin
• ! the "rows" parameter is mixed in but not fired/styled if the TextBox class is present ...
This might be a fundamental jQuery misunderstanding but I've got to ask...
I'm trying to get the jQuery.validate to display its error messages on qTip, a jQuery plugin for customizing tooltips. Specifically I want to get the tooltip to pop-up on mouseover of a little red "X" icon.
I can get the tooltip to popup over the form field using the following code:
$().ready(function() {
// validate signup form on keyup and submit
$("#signup").validate({
errorPlacement: function(error, element) {
element.parent().parent().append('<div class="rederrorx"></div>');
element.qtip(
{
//qTip formatting and content code
});
},
But to get the tooltip to pop up over a red x, I change element.qTip( to $(".rederrorx").qTip( and it doesn't work (no message/qTip initialized).
Has the concept of selectors just gone way over my head? Prob so. Or is the jQuery class selector not selecting anything because the append has yet to take place? Or...
Thanks!
Emile
I replaced element.parent() with element.parents('.classname') in order to pinpoint the exact parent element I wanted. I'm assuming a plugin added nested divs without telling me. No other answers....
lo siento for the stupid question