I've issue with ASP.NET MVC validation not working with Bootstrap Select Picker, If I remove the selectpicker class from dropdown list the validation working fine and if I added it the validation not working , Any help please
The MVC Code :
#Html.DropDownListFor(m => m.SelectedLocationID, Model.lstOfLocations, "Select Delivery Location", new { #class = " selectpicker", #placeholder = "" })
#Html.ValidationMessageFor(m => m.SelectedLocationID)
The Jquery Code With Valida-min.js
$(".SearchForm").validate({
ignore: ':not(select:hidden, input:visible, textarea:visible)',
rules: {
SelectedLocationID: {
required: true
}
},
errorPlacement: function (error, element) {
if ($(element).is('Select Delivery Location')) {
element.next().after(error);
} else {
error.insertAfter(element);
}
}
})
Thanks
I stumbled upon this question while searching for fix for same issue.
The problem arises from fact, that Bootstrap hides original select element and creates it's own elements to handle UI for dropdown list. In the meantime, jQuery validation by default ignores invisible fields.
I fixed this with workaround which combines changing validation ignore list and finding parent form. Final code snippet in my case looks like this
if ($(".selectpicker")[0]) {
$(".selectpicker").selectpicker();
$('.selectpicker').parents('form:first').validate().settings.ignore = ':not(select:hidden, input:visible, textarea:visible)';
}
There still could be potential issues, but for my needs this solution works good enough.
The problem is caused by the display:none property given from bootstrap select skin to the original select (jQuery validate ignores hidden fields).
It could be avoided working only with CSS keeping back visible the original select but giving it some properties to avoid visibility
select.bs-select-hidden, select.selectpicker
{
display:block !important; opacity:0; height:1px; width:1px;
}
I guess, editing of bootstrap-select.js may solve this issue permanently.
I have tried something like this:
$(document)
.data('keycount', 0)
.on('keydown.bs.select', '.bootstrap-select [data-toggle=dropdown], .bootstrap-select [role="listbox"], .bs-searchbox input', Selectpicker.prototype.keydown)
.on('focusin.modal', '.bootstrap-select [data-toggle=dropdown], .bootstrap-select [role="listbox"], .bs-searchbox input', function (e) {
//Validation handler: Kartik
var $thisParent = $(this).parent(".bootstrap-select");
if ($thisParent.find("ul").find("li:first").hasClass("selected")) {
if ($thisParent.next("span").length > 0)
$thisParent.next("span").css("display", "block");
}
else {
if ($thisParent.next("span").length > 0)
$thisParent.next("span").css("display", "none");
}
e.stopPropagation();
});
Its working fine to me.
Related
how to disable flag in "ngx-intl-tel-input" lib, I disable input field in form has ngx-intl-tel-input but not disable flag.
Please see issue fixed "https://github.com/webcat12345/ngx-intl-tel-input/issues/205"
This issue has been fixed in the latest releases. To disable your control, including the country dropdown:
phoneForm = new FormGroup({
phone: new FormControl({
value: undefined,
disabled: true
}, [Validators.required])
});
or
this.phoneForm.controls['phone'].disable();
I found a hack. Take a ref of <ngx-mat-intl-tel-input> and disable the button inside it. Check the code below.
HTML:
<ngx-mat-intl-tel-input
[preferredCountries]="['us']"
[enablePlaceholder]="true"
[enableSearch]="true"
format="national"
name="phone"
placeholder="Phone Number"
formControlName="phone"
#phoneField
></ngx-mat-intl-tel-input>
Component TS:
#ViewChild('phoneField')
public phoneField;
public ngAfterViewChecked() {
// disabling country selection button
try {
this.phoneField.elRef.nativeElement.firstChild.children[0].disabled = 'true';
} catch (e) {
// ignore this
}
}
Enjoy :)
How can I change a css class when all the tabs in ui.bootstrap.accordion are closed,for instance if the tabs were closed because another tab triggered them to close, the ng-class expression won't run and won't change the icon.
This is the view
<uib-accordion>
<uib-accordion-group ng-repeat="item in portafolio | orderBy : 'order' " ng-click="item.opened=!item.opened">
<uib-accordion-heading>
<i class="fa fa-lg" ng-class="(item.opened === true) ? 'fa-minus-circle':'fa-plus-circle'"></i>
<span>{{item.name}}</span>
<i class="pull-right fa fa-lg" ng-class="{'fa-caret-down': true === item.opened, 'fa-caret-right': false === item.opened}"></i>
</uib-accordion-heading>
<div ng-include="'modules/widgets/portafolio/tpl/'+item.type+'.html'"></div>
</uib-accordion-group>
</uib-accordion>
And in the controller I have this.
$scope.portfolio = [
{ type: 'Balance', order:1, name:'current balance', opened: false},
{ type: 'Credits', order:2, name:'Credits', opened: false},
{ type: 'Investments', order:3, name:'Investments', opened: false}
];
I tried to use the ng-class directive in order to evaluate if the item.opened was true or false,but when the tabs were closed because another tab closed them, the item.opened wont update.
Indeed, I've researched that with $watch I can "watch" for changes and run a function, I saw that when I click on one tab, a css class '.panel-open'is added ,but how can I watch that div element that the css class has been added in order to update the i class elements.
Thanks.
Well, you basically want to watch for any changes in your portfolios array, when all of the opened properties are false, trigger a value bound to $scope that will change a class, preferably using something like ng-class (this will also work using ng-style).
Because you watch an array, you should using $watchCollection instead of plain old $watch
$scope.$watchCollection(function() {
return $scope.portfolio.every((item) => {
return item.opened === false;
})
}, function(newValue, oldValue) {
$scope.value = newValue;
})
Array.prototype.every will return true if all the items in an array return true on a predicate function, in this case, all of the .opened properties are false.
Then setup something like
ng-class="{'btn-primary': value, 'btn-success': !value}"
Here's a plunker
Your question was kind of hard to understand, comment if I didn't cover something.
I have a Select2 that fetches its data remotely, but I would also like to set its value programatically. When trying to change it programatically, it updates the value of the select, and Select2 notices the change, but it doesn't update its label.
https://jsfiddle.net/Glutnix/ut6xLnuq/
$('#set-email-manually').click(function(e) {
e.preventDefault();
// THIS DOESN'T WORK PROPERLY!?
$('#user-email-address') // Select2 select box
.empty()
.append('<option selected value="test#test.com">test#test.com</option>');
$('#user-email-address').trigger('change');
});
I've tried a lot of different things, but I can't get it going. I suspect it might be a bug, so have filed an issue on the project.
reading the docs I think maybe you are setting the options in the wrong way, you may use
data: {}
instead of
data, {}
and set the options included inside {} separated by "," like this:
{
option1: value1,
option2: value2
}
so I have changed this part of your code:
$('#user-email-address').select2('data', {
id: 'test#test.com',
label: 'test#test.com'
});
to:
$('#user-email-address').select2({'data': {
id: 'test#test.com',
label: 'test#test.com'
}
});
and the label is updating now.
updated fiddle
hope it helps.
Edit:
I correct myself, it seems like you can pass the data the way you were doing data,{}
the problem is with the data template..
reading the docs again it seems that the data template should be {id, text} while your ajax result is {id, email}, the set manual section does not work since it tries to return the email from an object of {id, text} with no email. so you either need to change your format selection function to return the text as well instead of email only or remap the ajax result.
I prefer remapping the ajax results and go the standard way since this will make your placeholder work as well which is not working at the moment because the placeholder template is {id,text} also it seems.
so I have changed this part of your code:
processResults: function(data, params) {
var payload = {
results: $.map(data, function(item) {
return { id: item.email, text: item.email };
})
};
return payload;
}
and removed these since they are not needed anymore:
templateResult: function(result) {
return result.email;
},
templateSelection: function(selection) {
return selection.email;
}
updated fiddle: updated fiddle
For me, without AJAX worked like this:
var select = $('.user-email-address');
var option = $('<option></option>').
attr('selected', true).
text(event.target.value).
val(event.target.id);
/* insert the option (which is already 'selected'!) into the select */
option.appendTo(select);
/* Let select2 do whatever it likes with this */
select.trigger('change');
Kevin-Brown on GitHub replied and said:
The issue is that your templating methods are not falling back to text if email is not specified. The data objects being passed in should have the text of the <option> tag in the text property.
It turns out the result parameter to these two methods have more data in them than just the AJAX response!
templateResult: function(result) {
console.log('templateResult', result);
return result.email || result.text;
},
templateSelection: function(selection) {
console.log('templateSelection', selection);
return selection.email || selection.id;
},
Here's the fully functional updated fiddle.
i cant get the issue in my code , every thing working proper but issue is that when user click or focus first time on textbox correct img show .. this is incorrect but i cant solved this problem when user typing then after completing wher user correct type then show otherwise not shown . can any one help me regarding this issue . my complete jquery and html or css code are available in this link pls check and solved my issue
my code link
i think error on this function but icant get the issue
$('#step1 #fName').focus(function(){
if($('#step1 #fName').hasClass('error_Aplha')==true)
{
$('#step1 #fntick').removeClass('block');
}
else {
$('#step1 #fntick').addClass('block');
}
}).blur(function(){
if($('#step1 #fName').hasClass('error_Aplha')==true)
{
$('#step1 .fname_error').fadeIn(100).delay(2000).fadeOut(1000);
$('#step1 #fntick').removeClass('block');
}
else {
$('#step1 .fname_error').removeClass('block');
$('#step1 #fntick').addClass('block');
}
});
thanks in advance
Wow, that's a lot of code for a simple task. Change it so the checks are only done in the .keyup() and .blur() events of the INPUT elements.
Not 100% sure what the intended behaviour is, but this will probably get you going:
$(document).ready(function(e) {
var errorAlpha = function() {
var reg = /^([A-Za-z]+)$/;
var check = $(this).val();
if (reg.test(check) == true && check.match(reg) != null) {
// VALID
$(this).removeClass('error_Aplha');
$(this).next('img').addClass('block');
$(this).prevAll('span.tooltip2').stop(true).delay(500).fadeOut(400);
} else {
// INVALID
$(this).addClass('error_Aplha');
$(this).next('img').removeClass('block');
$(this).prevAll('span.tooltip2').fadeIn(500).delay(2000).fadeOut(1000);
}
};
$('#step1 #fName, #step1 #lName').on('keyup blur', errorAlpha);
});
Demo: http://jsfiddle.net/gU3PU/6/
It is working properly every time the page loads at the first time. However when we do a Postback the editor disappears with just the textarea.
The postback is happening due to a dropdown on the page.
<asp:TextBox runat="server" ID="TBClosingInstructions" TextMode="MultiLine" Rows="8" Columns="40" TabIndex="2" Font-Name="Verdana"></asp:TextBox><script language="JavaScript">generate_wysiwyg('TBClosingInstructions');</script>
I would like the editor to remain even after postback. I have tried the following code
if (Page.IsPostBack)
{
this.ClientScript.RegisterStartupScript(this.GetType(), "script", "<script language=\"JavaScript\">generate_wysiwyg('TBClosingInstructions');</script>", true);
Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "ClientScript", "<script language=\"JavaScript\">generate_wysiwyg('TBClosingInstructions');</script>", true);
}
Tried both registerStartupScript and registerClientScriptBlock individually to bind the javascript functions in every postback. But this doesn't work.
Is there any alternative? Please suggest.
There are a couple of methods that attach the editor to a textarea.
WYSIWYG.attach('all', mysettings);
This is what I was using which worked well if you content/form was not loaded dynamically.
Looking at the source code it attaches to the load event. This is probably why it isn't being attached.
WYSIWYG_Core.addEvent(window, "load", function generateEditor() { WYSIWYG._generate(id, settings); });
WYSIWYG.attachAll(mySettings);
I found this one works (all textareas), again looking at the source code it looks for every textarea in the DOM and does not attach to an event.
var areas = document.getElementsByTagName("textarea");
for (var i = 0; i < areas.length; i++) {
var id = areas[i].getAttribute("id");
if (id == null || id == "") continue;
this.setSettings(id, settings);
WYSIWYG_Core.includeCSS(this.config[id].CSSFile);
WYSIWYG._generate(id, settings);
}