We Keep Coding

jquery form validation not working on checkbox

$(document).ready(function () {
$('#msg_opportunities_form').validate({
rules: {
text_message: {
required: true,
maxlength: 400
},
temrs_and_condp: {
required: true
}
},
messages: {
text_message: {
required: "Please enter Announcement Title",
maxlength: "Your Announcement Title must consist of at most 400 characters"
},
temrs_and_condp: "Please accept our terms"
},
errorElement: "em",
errorPlacement: function(error, element) {
// Add the `help-block` class to the error element
error.addClass("help-block");
if (element.prop("type") === "checkbox") {
error.insertAfter(element.parent("p"));
} else {
error.insertAfter(element);
}
},
highlight: function(element, errorClass, validClass) {
$(element).parents(".col-sm-5").addClass("has-error").removeClass("has-success");
},
unhighlight: function(element, errorClass, validClass) {
$(element).parents(".col-sm-5").addClass("has-success").removeClass("has-error");
}
});
$('#msg_opportunities_form').submit(function(event) {
console.log($(this).find(':input'));
if ($('#msg_opportunities_form').valid()) {
return true;
} else {
event.preventDefault();
}
});
});
.userSentInfo img {width: 97px;height: 97px;object-fit: cover;border-radius: 50%;}
.userSentDetials span {font-size: 20px;}
.sendMessage h3 {font-family:'louis_george_cafebold';}
textarea.sendMsgHere { border: 1px solid #acacac; height: 358px; resize: none; border-bottom: 0px;
margin-bottom: 0;}
.sumitBtnBox {position: relative;width: 100%;bottom:5px;background: #fff;padding: 0 18px;height: 60px;margin: 0 auto;left: 0;
right: 0;border-top: 1px solid #acacac;border-left: 1px solid #acacac;border-right:1px solid #acacac;
border-bottom: 1px solid #acacac; }
button.bg-blue.sendMsgBtn {border: none;width: 100px; padding: 6px; font-size: 18px; transition: all 0.3s;}
input#temrs_and_cond {display: none;}
.termsndcond + label { position: relative; font-size:16px; color: #605b5c; display: flex; align-items: center;}
.col-md-12.px-0.d-flex.userSentInfo.align-items-center { margin-top: 25px;}
button.bg-blue.sendMsgBtn:hover { background: transparent; color: #2d68b2; border: 1px solid #2d68b2;}
.col-md-8.sndMsgBox.col-12 { margin-top: 100px;}
.sndMsgBox div {color: #595959;font-size: 24px;letter-spacing: 0px;}
.sndMsgBox hr { margin: 34px auto; border-top: 1px solid #a8a8a8;}
.sndMsgBox h3 {font-family:'louis_george_cafebold'; font-size: 24px;}
.sndMsgBox div div { margin-bottom: 10px;}
.sndMsgBox div strong {font-family:'louis_george_cafebold';}
.ads-block { margin-bottom: 40px;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/additional-methods.js"></script>
<form method="POST" action="{{url('/')}}/{{Request::path()}}" id="msg_opportunities_form" class="inline-form" enctype="multipart/form-data">
<h3 class="text-color-blue">Send Message </h3>
<textarea class="sendMsgHere" name="text_message" placeholder="Type Here"></textarea>
<p class="checkbox sumitBtnBox d-flex justify-content-between align-items-center">
<input name="temrs_and_condp" type="checkbox" value="1" id="temrs_and_cond" class="termsndcond">
<label for="temrs_and_cond"> I agree to Terms & Conditions </label>
</p>
<button class="bg-blue sendMsgBtn" type="submit"> Send</button>
</form>
the above code is for jquery from validation but it did't validate checkbox. i just need to check check box is required before submitting form . already done too many hard refresh , check on stack for checkbox everyone say just put required with true but that not working for me don't know why this is not working if i add any other field above or below checkbox they are working perfectly fine
already go through this link
thanks in advance

there are two problem's in my code first is console log just remove it for snippet . then it's work fine
second the major problem which i forgot to write is css file (question is updated now)
my designer put my check box to
display none
which cause the hole mess just remove and every then work magically in place of display none use this:
opacity: 0;position: absolute;
hope it will work for you guys too

To do this you have to use the :checked selector.
refer following code:
$('#form1').submit(function() {
if $('input:radio', this).is(':checked') {
} else {
alert('Please agree to terms and conditions!');
return false;
}
});

Measuring overflow is incorrect in Vue

I'm trying to make a overflow with tagging, which fades out in the beginning to give the user a hint that there's more. This is what it looks like:
I put the fading gradient as a :after inside the CSS and "activate" it by Vue's style binding, when scrollWidth > offsetWidth (overflow bigger than the box itself).
But the problem is that it sometimes (lags?) behind and does not calculate the scrollWidth right, especially when I enter a long word and then delete it. It doesn't "like" that and it says that the overflow is false, but there's no tag in the box. Basically this happens:
I tried to put the calculation inside this $nextTick(), but it didn't solve the issue. I also tried using Vue's keyDown, keyUp and keyPress listeners, but nothing solved this also.
This (also on CodePen) demonstrates the issue:
new Vue({
el: '#tagsinput',
data: {
input_value: "",
tags: []
},
methods: {
addTag: function() {
if (this.input_value > "") {
this.tags.push(this.input_value)
this.input_value = "";
// Refocus the text input, so it stays at the end
this.$refs.input.blur();
this.$nextTick(function() {
this.$refs.input.focus();
})
}
},
deleteTag: function() {
if (this.input_value == "") {
this.tags.pop()
}
}
}
})
.outter {
border: 1px solid red;
width: 250px;
overflow: hidden;
display: flex;
}
.inner {
border: 1px solid blue;
margin: 2px;
display: flex;
}
.tag {
border: 1px solid black;
margin: 2px;
}
input {
min-width: 80px;
width: 80px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.2/vue.min.js"></script>
<div id="tagsinput">
<div class="outter" ref="outter">
<div class="inner" ref="inner">
<div class="tag" v-for="tag in tags">{{tag}}</div><input type="text" v-model="input_value" #keydown.enter="addTag" #keydown.delete="deleteTag">
</div>
</div>
Outter div scrollwidth: {{ $refs.outter ? $refs.outter.scrollWidth : null }}<br> Outter div offsetWidth: {{ $refs.outter ? $refs.outter.offsetWidth : null }}<br>
<br> Is overflowing: {{ ($refs.outter ? $refs.outter.scrollWidth : null) > ($refs.outter ?$refs.outter.offsetWidth : null) }}
</div>
<br><br> Type a really long word in, add and then delete it. "Is overflowing" will be the inverse, until you press Backspace <b>again</b>.
Any help is greatly appreciated.

You should call the check for overflow after the moment you've added or deleted the tag, so you check the overflow at the right moment. Vue isn't databinding an inline condition like that. The following code should work for you. It calls a checkOverflow function within $nextTick, setting a data-binded variable isOverflowed that you then can use to bind some styles.
new Vue({
el: '#tagsinput',
data: {
input_value: null,
tags: [],
isOverflowed: false
},
methods: {
addTag: function() {
if(this.input_value) {
this.tags.push(this.input_value)
this.input_value = null;
// Refocus the text input, so it stays at the end
this.$refs.input.blur();
this.$nextTick(function() {
this.$refs.input.focus();
this.checkOverflow()
})
}
},
deleteTag: function() {
if(!this.input_value) {
this.tags.pop()
this.$nextTick(function() {
this.checkOverflow()
})
}
},
checkOverflow: function() {
this.isOverflowed = (this.$refs.outter ? this.$refs.outter.scrollWidth : null) >
(this.$refs.outter ? this.$refs.outter.offsetWidth : null)
}
}
})
.outter {
border: 1px solid red;
width: 250px;
overflow: hidden;
display: flex;
}
.inner {
border: 1px solid blue;
margin: 2px;
display: flex;
}
.tag {
border: 1px solid black;
margin: 2px;
}
input {
min-width: 80px;
width: 80px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="tagsinput">
<div class="outter" ref="outter">
<div class="inner" ref="inner">
<div class="tag" v-for="tag in tags">{{tag}}</div>
<input type="text" v-model="input_value" #keydown.enter="addTag" #keydown.delete="deleteTag" ref="input">
</div>
</div>
<br>
Is overflowing:
{{ isOverflowed }}
</div>
<br><br>
Type a really long word in, add and then delete it. "Is overflowing" will be the inverse, until you press Backspace <b>again</b>.

More of a CSS/HTML hack ...
Add <div id="spaceFade"></div> after <div id="tagsinput">, then add the following CSS :
#spaceFade {
background-image: linear-gradient(to right, rgba(255,255,255,1), rgba(255,255,255,1), rgba(0,0,0,0));
position : absolute;
height : 2em;
width : 3em;
}
#tagsinput {
position : relative;
}
.outter {
justify-content: flex-end;
}

Show hidden textbox with Polymer after button press

I have the following code
<dom-module id="practice-list">
<template>
<paper-drawer-panel>
<paper-header-panel main mode="waterfall-tall">
<paper-toolbar id="mainToolbar">
<paper-icon-button id="paperToggle" icon="menu" paper-drawer-toggle></paper-icon-button>
<span class="flex"></span>
<paper-icon-button icon="search" on-tap="srchandler" id="srchandler"></paper-icon-button>
<input type="text" id="searchText" show$="{{show}}" />
<div class="middle paper-font-display2 app-name ident">Practice List</div>
</paper-toolbar>
</paper-header-panel>
</paper-drawer-panel>
</template>
<script>
Polymer({
is: "practice-list",
show: {
type: Boolean,
value: false
},
ready: function () {
},
srchandler: function () {
this.show = !this.show;
alert('Is it showing?');
}
});
</script>
</dom-module>
Which in turn uses the following css
#searchText
{
width:0px;
border: none;
line-height:30px;
border-radius:5px;
background:#3F59B5;
color:#fff;
outline: 0;
visibility: hidden;
}
#searchText[show] input {
padding: 10px;
visibility: visible;
width:200px;
}
Now I was trying to use the technique described here, but to no avail.
polymer search input text from icon
Even though I know the handler for the on-tap of the paper-icon-button is working and called the textbox does not appear.

Why not use the HTML5 attribute hidden? (see here for more info)
Your input would change to:
<input type="text" id="searchText" hidden$="{{hidden}}" />
Then in your CSS you can remove the visibility rules and the show attribute:
#searchText {
border: none;
line-height: 30px;
border-radius: 5px;
background: #3F59B5;
color: #fff;
outline: 0;
}
#searchText input {
padding: 10px;
width: 200px;
}
And change the property show to be hidden to make the things a bit more logical:
hidden: {
type: Boolean,
value: true
},
Here is a very simple plunker of this in action.

Can't seem to get ngAnimate to work on an ng-repeat

I have the following snippet of HTML:
<div ng-app ng-controller="mainCtrl">
<div ng-repeat="item in items" ng-mouseenter="item.showRemove = true" ng-mouseleave="item.showRemove = false" class="repeated-item">
<span class="remove-item glyphicon glyphicon-remove" ng-show="item.showRemove" ng-click="removeItem(item)"></span>
<div class="h3">{{item.title}}</div>
<p>{{item.description}}</p>
</div>
</div>
The following CSS is applied to the markup:
body { padding: 15px; }
.repeated-item {
padding: 10px;
margin-bottom: 15px;
border-left: solid 1px #ccc;
border-top: solid 1px #ccc;
border-radius: 10px;
background-color: #eee;
position: relative;
}
.repeated-item:hover { background-color: #ddd; }
.remove-item {
float: right;
cursor: pointer;
color: #b00;
font-size: x-large;
}
.h3 {
border-bottom: dotted 1px #bbb;
}
.repeated-item.ng-leave {
-webkit-transition:0.5s linear all;
-moz-transition:0.5s linear all;
-o-transition:0.5s linear all;
transition:0.5s linear all;
opacity:1;
}
.repeated-item.ng-leave.ng-leave-active {
opacity:0;
}
Lastly, I have the following javascript:
function mainCtrl($scope) {
$scope.items = [
{
title: 'Star Trek: The Original Series',
description: 'brevity brevity...'
},
{
title: 'Star Trek: The Next Generation',
description: "brevity brevity..."
},
{
title: 'Star Trek: Deep Space Nine',
description: "brevity brevity..."
},
{
title: 'Star Trek: Voyager',
description: "brevity brevity..."
},
{
title: 'Star Trek: Enterprise',
description: "brevity brevity..."
}
];
$scope.removeItem = function (itemToRemove) {
var index = $scope.items.indexOf(itemToRemove);
if (index !== -1) {
$scope.items.splice(index, 1);
}
};
}
I'm creating this little demo simply to learn how to use ngAnimate. However, the documentation on the web seems a little lacking and I can't seem to figure out what I'm doing wrong. I'm using this page to apply a fade-out animation to the items in the ng-repeat. Nothing I do seems to work. I've given the repeated item it's own class and I've applied the animation rules (yes I did include the ngAnimate file). Everything works except the animation.
What am I doing wrong?
Working demo on Codepen.io

Change <div ng-app ng-controller="mainCtrl"> to <div ng-app="ngAnimate" ng-controller="mainCtrl">
Note the ngAnimate.

I am interested in using toggle class to change the color of the background of an image

I set up a button to change the color. It is showing classA but it will not change to classB onclick. The button seems to be working so I am not sure what is not working here. I would appreciate any help. Here is the code.
'<script>
function toggleclass() {
var myElement = document.getElementById("id1");
if(myElement.className == "classA") {
myElement.className = "classB";
} else {
myElement.className="classA";
}
}
window.onload=function() {
document.getElementById("btn1").onclick =toggleClass;
}
</script>'
HTML
'<td><div id="id1" class="classA"><img src="images/this.png" width="300" height="300"
alt="ttemp"></div>
<input type="button" id="btn1" value="ChangeColor" />
</td>'
CSS
'.classA {
width: 300px;
border: 2px solid black;
background-color: green;
color: red;
padding: 3px;
}
.classB {
width: 300px;
border: 2px solid black;
background-color: blue;
color: red;
padding: 3px;
}'
Thanks for your help,
Frank

Bro, do you even jQuery? http://api.jquery.com/click/
$('#btn1').click(function(){
$('#id1').toggleClass('classB');
});

Personally I would do the following:
$('#btn1').on("click", function(e){
e.preventDefault();
$('#id1').toggleClass("classB");
});
The prevent code should stop the page from jumping but still preform the action whilst toggling the class
Just my 2 cents