Develop Reference

jquery validation not working in ckeditor

I am working on Jquery validation,I have three fileds in my form (title,file,ckeditor) but
my ckeditor validation not working for me , i tried with following code but validation working except "ckeditor",where
i am wrong ? Thanks in advance
<form name="addblog" id="addblog" method="POST">
<input type="text" class="form-control" required>
<input class="form-control validate[required]" type="file" id="file" name="file" required>
<textarea class="ckeditor" name="editor1" name="editor1" id="editor1" required></textarea>
</form>
Here is my script code
<script>
$().ready(function() {
$("#addblog").validate({
rules: {
file: {
required: true
},
'editor1': {
required: true
}
},
messages: {
file: {
required: "Please enter your image"
}
},
});
});
</script>

My Javascript if statement returns true even though it is false

I have a button and a form on my page. When the button is clicked it should display the form, and when click again it should hide the form.
For some reason, whenever the button is clicked it executes the first if statement regardless of whether it is true or not. How can I fix this?
Here is my HTML code
<div class="return-user-signin">
<h2 class="checkout-return-cust">Returning customer?</h2>
<button class="checkout-login-button"><i class="fas fa-user"></i> log in</button>
<form class="woocomerce-form woocommerce-form-login login check-login pop-login-form" method="post" style="display: none;">
<p class="form-row form-row-first">
<input placeholder="Username or email" class="input-text placeholder" name="username" id="username" type="text">
</p>
<p class="form-row form-row-last">
<input class="input-text placeholder" placeholder="Password" name="password" id="password" type="password">
</p>
<div class="clear"></div>
<p class="form-row">
</p>
<div class="clear"></div>
</form>
Here is my JavaScript
var login_button = $(".checkout-login-button");
var login_form = $(".pop-login-form");
if (login_form.css('display') == "none") {
$(document).on('click', '.checkout-login-button', function () {
login_form.show();
login_form.off('click');
login_form.css('display', 'block');
return;
});
} else {
$(document).on('click', '.checkout-login-button', function () {
login_form.hide();
login_form.off('click');
login_form.css('display', 'none');
return;
});
}

You have first to create the event, then inside it you do your conditional statements.
var login_button = $(".checkout-login-button");
var login_form = $(".pop-login-form");
$(document).on('click', '.checkout-login-button', function(){
if( login_form.css('display') == "none" ) {
login_form.show();
login_form.off('click');
login_form.css('display', 'block');
return;
} else {
login_form.hide();
login_form.off('click');
login_form.css('display', 'none');
return;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="return-user-signin">
<h2 class="checkout-return-cust">Returning customer?</h2>
<button class="checkout-login-button"><i class="fas fa-user"></i> log in</button>
<form class="woocomerce-form woocommerce-form-login login check-login pop-login-form" method="post" style="display: none;">
<p class="form-row form-row-first">
<input placeholder="Username or email" class="input-text placeholder" name="username" id="username" type="text">
</p>
<p class="form-row form-row-last">
<input class="input-text placeholder" placeholder="Password" name="password" id="password" type="password">
</p>
<div class="clear"></div>
<p class="form-row">
</p>
<div class="clear"></div>

You can have only one click handler and check the CSS state inside it. Besides, css is taking care of the visibility using display:block/none, so in my opinion the show()/hide() methods are redundant.
var login_button = $(".checkout-login-button");
var login_form = $(".pop-login-form");
$(document).on('click', '.checkout-login-button', function() {
if (login_form.css('display') === "none") {
login_form.css('display', 'block');
} else {
login_form.css('display', 'none');
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="return-user-signin">
<h2 class="checkout-return-cust">Returning customer?</h2>
<button class="checkout-login-button"><i class="fas fa-user"></i> log in</button>
<form class="woocomerce-form woocommerce-form-login login check-login pop-login-form" method="post" style="display: none;">
<p class="form-row form-row-first">
<input placeholder="Username or email" class="input-text placeholder" name="username" id="username" type="text">
</p>
<p class="form-row form-row-last">
<input class="input-text placeholder" placeholder="Password" name="password" id="password" type="password">
</p>
<div class="clear"></div>
<p class="form-row">
</p>
<div class="clear"></div>
</form>

Change your JavaScript as below:
var login_button = $(".checkout-login-button");
var login_form = $(".pop-login-form");
var show_form = false; // add this line
$(document).on('click', '.checkout-login-button', function () {
if(!show_form){
//SHOW FORM
show_form = true;
}else{
//HIDE FORM
show_form = false;
}
});

You seem to be trying to change the function handling the click, which would be accomplished by removing the existing one and adding another. You’re trying to remove it here:
login_form.off('click');
but that doesn’t work when you actually added the listener to document to make use of event delegation, and no listener is being added again after this.
It’s simpler to just have one listener, and to attach it directly to the element if it exists at the time:
var login_form = $(".pop-login-form");
$(".checkout-login-button").click(function () {
login_form.toggle();
});
which your login_button initialization suggests is the case. If not, continue with event delegation by all means:
var login_form = $(".pop-login-form");
$(document).on("click", ".checkout-login-button", function () {
login_form.toggle();
});

It's the other way around, you define the .click() event once and inside it you define the logic for the if-else structure.
The way you have it now, it is only showing the form (never hiding it) because the only part of the code being run is the one inside login_form.css('display') == "none" which is true when the page loads
HIH
var login_button = $(".checkout-login-button"); var login_form = $(".pop-login-form");
$(document).on('click', '.checkout-login-button', function(){
if( login_form.css('display') == "none" ) {
login_form.show();
login_form.off('click');
login_form.css('display', 'block');
}
else {
login_form.hide();
login_form.off('click');
login_form.css('display', 'none');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="return-user-signin">
<h2 class="checkout-return-cust">Returning customer?</h2>
<button class="checkout-login-button"><i class="fas fa-user"></i> log in</button>
<form class="woocomerce-form woocommerce-form-login login check-login pop-login-form" method="post" style="display: none;">
<p class="form-row form-row-first">
<input placeholder="Username or email" class="input-text placeholder" name="username" id="username" type="text">
</p>
<p class="form-row form-row-last">
<input class="input-text placeholder" placeholder="Password" name="password" id="password" type="password">
</p>
<div class="clear"></div>
<p class="form-row">
</p>
<div class="clear"></div>

Onsubmit in form does not called

I have next form:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
function submit(form) {
var first_pass = form.find('.first_try');
var second_pass = form.find('.second_try');
if (first_pass.value == second_pass.value) {
return true
}
first_pass.value = '';
second_pass.value = '';
first_pass.attr('placeholder', 'Пароли не совпадают');
first_pass.css('border-color', 'red');
second_pass.css('border-color', 'red');
return false
}
</script>
<form role="form" method="post" onsubmit="return submit($('#PasswordChange form'))">
<h3>Редактирование пользователя</h3>
<div class="form-group">
<input type="password" class="form-control first_try" name="password"
placeholder="Новый пароль"
required>
</div>
<div class="form-group">
<input type="password" class="form-control second_try" name="password"
placeholder="Повтор пароля"
required>
</div>
<input type="submit" name="submit" class="btn btn-primary pull-right" value="Отправить"></input>
</form>
This script checks whether passwords are the same.
But using firefox debugger i can't find that it goes into this method.
Is this problem with script? Or Is ths problem about declaring onsubmit handler?

There was many problems:
change value to val
use another name for submit function, it's kinda reserved
use this instead of $('#PasswordChange form')
use var first_pass = $('.first_try'); instead of find
you forgot to write else
and you need use event.preventDefault(); to stop refreshing page or submiting page.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
function save(form) {
var first_pass = form.querySelector('.first_try');
var second_pass = form.querySelector('.second_try');
if (first_pass.value == second_pass.value) {
alert('its ok');
return true;
} else {
first_pass.value = '';
second_pass.value = '';
first_pass.placeholder = 'Пароли не совпадают';
first_pass.style.borderColor='red';
second_pass.style.borderColor='red';
return false
}
}
</script>
<form role="form" method="post" onsubmit="event.preventDefault(); return save(this)">
<h3>Редактирование пользователя</h3>
<div class="form-group">
<input type="password" class="form-control first_try" name="password"
placeholder="Новый пароль"
required>
</div>
<div class="form-group">
<input type="password" class="form-control second_try" name="password"
placeholder="Повтор пароля"
required>
</div>
<input type="submit" name="submit" class="btn btn-primary pull-right" value="Отправить"/>
</form>

Use this code
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
function submitData(form) {
var first_pass = form.find('.first_try');
var second_pass = form.find('.second_try');
if (first_pass.value == second_pass.value) {
return true
}
first_pass.value = '';
second_pass.value = '';
first_pass.attr('placeholder', 'Пароли не совпадают');
first_pass.css('border-color', 'red');
second_pass.css('border-color', 'red');
return false
}
</script>
</head>
<body>
<form role="form" method="post" onsubmit="return submitData($('#PasswordChange form'))">
<h3>Редактирование пользователя</h3>
<div class="form-group"> <input type="password" class="form-control first_try" name="password" placeholder="Новый пароль" required></div>
<div class="form-group"> <input type="password" class="form-control second_try" name="password" placeholder="Повтор пароля" required></div><input type="submit" name="submit" class="btn btn-primary pull-right" value="Отправить"></form>
</body>
</html>

Please change submit function name because it is keyword so it is not use it. Also remove </input> next to submit button

Use this :
onsubmit="return submit(this)"

You should not return anything if you don't need to cancel the submit action. Also you could use submit form event handler with jQuery .submit() method instead of hanler definition in onsubmit attribute.
$("form").submit(function(e) {
var passwords = $('[name=password]');
if (passwords.eq(0).val() !== passwords.eq(1).val()) {
alert("Пароли не совпадают!");
return false;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form role="form" method="post" action="/">
<h3>Редактирование пользователя</h3>
<div class="form-group">
<input type="password" class="form-control first_try" name="password" placeholder="Новый пароль" required >
</div>
<div class="form-group">
<input type="password" class="form-control second_try" name="password" placeholder="Повтор пароля" required />
</div>
<input type="submit" name="submit" class="btn btn-primary pull-right" value="Отправить" />
</form>
Also I recommend you to use Bootstrap validation states instead of input's border style setting.

Validate fields using jquery

I'm creating a form that requires to enter some fields.
The basic required attribute won't work on me, so I would like to use jQuery.
Then when those fields were already filled, the submit button will be enabled.
here's my code:
$(function() {
$('#catalog_order').validate(
{
rules:{
schedule: {
required: true
}
},
messages:{
schedule: "Please indicate schedule",
}
});
$('#checkin input').on('keyup blur', function (e) { // fires on every keyup & blur
if ($('#checkin').valid()) {
$('#submit').attr('disabled', false);
}
else {
$('#submit').attr('disabled', true);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.js"></script>
<form role="form" id="checkin" name="checkin" method="post">
<label for="dedicatalog"> Dedication Text: </label> <input type="text" name="dedicatalog" id="dedicatalog" size="20" placeholder="Dedication" /> <!-- NOT REQUIRED, but still disable the CHECK IN NOW-->
<label for="schedule"> Date: </label> <input type="date" id="schedule" name="schedule" value="M-D-YY"/> <!-- REQUIRED -->
<label for="figurine_select"> Figurine/s: </label> <!-- NOT REQUIRED, but still disable the CHECK IN NOW-->
<select name="figurine_sel" id="figurine_select" />
<option selected value=" ">--Figurines--</option>
<option value="angel">Angel</option>
<option value="teletubies">Teletubies</option>
</select>
<input type="submit" id="submit" class="btn btn-default" value="Check In Now" disabled="disabled" />
</form>
Hope someone can help me out.
Thank you!!

This Fiddle Should work
Note that for every field you should specify all its option inside js object ( between brackets )
schedule: {
required: true
},
Below working snippet
jQuery.validator.addMethod("dateFormat", function(value, element) {
console.log(value,/^(0?[1-9]|1[0-2])\/(0?[1-9]|1[0-9]|2[0-9]|3[01])\/\d{2}$/.test(value));
return /^(0?[1-9]|1[0-2])\/(0?[1-9]|1[0-9]|2[0-9]|3[01])\/\d{2}$/.test(value);
}, "Invalid Date !");
$(function() {
$('#checkin').validate(
{
rules:{
schedule: {
required:true,
dateFormat: true,
}
},
messages:{
required:"Required Field !"
}
});
$('#checkin input').on('keyup blur', function (e) { // fires on every keyup & blur
if ($('#checkin').valid()) {
$('#submit').attr('disabled', false);
}
else {
$('#submit').attr('disabled', true);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.js"></script>
<form role="form" id="checkin" name="checkin" method="post">
<label for="dedicatalog"> Dedication Text: </label> <input type="text" name="dedicatalog" id="dedicatalog" size="20" placeholder="Dedication" />
<label for="schedule"> Date: </label> <input id="schedule" name="schedule" placeholder="M-D-YY"/>
<input type="submit" id="submit" class="btn btn-default" value="Check In Now" disabled />
</form>

This is how I validate that.
return false is just the same us disabling it
<form role="form" id="checkin" name="checkin" method="post">
<input id="dedicatalog"/>
<input id="date" type="date"/>
</form>
<script>
$('#checkin').on('submit', function() {
var dedicatalog = $.trim($('#dedicatalog').val());
var date = $.trim($('#date').val());
if(dedicatalog == '' || date == '') {
return false;
}
});
</script>

You can use the invalidHandler parameter to check for any invalid fields:
invalidHandler: function(event, validator) {
var errors = validator.numberOfInvalids();
if (errors) {
$('#button').hide();
} else {
$('#button').show();
}
}

button into tooltip using qtip plugin doesn't work

I wrote this code below used qtip plugin for html link :
$(document).ready(function() {
$('#login').qtip({
content: '<table><tr><td>Username</td><td><INPUT type="text" value="" name="username" title="Enter Username" class="txtbx"/></td>' +
'<td>Password</td><td><INPUT type="password" value="" name="password" title="Enter password" class="txtbx"/></td>' +
'<td><button id="loginbtn" type="submit" >login</button></td></tr></table>',
show: { when: { event: 'click' },
effect: { type: 'fade', length: 200 }
},
hide: { when: { event: 'unfocus' },
effect: { type: 'fade', length: 430 }
},
position: {
adjust: { resize: true
},
corner: {
target: 'bottomLeft',
tooltip: 'topLeft'
}
},
style: {
name: 'dark',
width: { max: 700 }
}
});
});
but the submit button doesn't work !!!!??? any help here !!

Does replacing <button id="loginbtn" type="submit" >login</button> with
<input name="loginbtn" id="loginbtn" type="submit" value="login" />
work?
Also, I don't see a form element anywhere with an action or method attribute wrapping all of your form inputs. Hence, I don't think the browser knows what to do when you submit the form.