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>
Related
I am currently using jQuery validation to validate my fields. I've two fields,
named "comments" & "account name". Both fields have the same rule method where required is true. When I click the "save" button, only the account name was validated. Why is that so? Here is a screenshot of my problem and my codes
$(document).ready(function() {
$.validator.setDefaults({
errorClass: 'help-block',
highlight: function(element) {
$(element)
.closest('.form-group')
.addClass('has-error');
},
unhighlight: function(element, errorClass, validClass) {
$(element)
.closest('.form-group')
.removeClass('has-error')
.addClass('has-success');
},
});
$('#dataForm').validate({
rules: {
commentInput: {
required: true
},
accountNameInput: {
required: true
}
},
submitHandler: function(form) {
alert('success');
}
});
});
<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.17.0/jquery.validate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/js/bootstrap.min.js"></script>
<form id="dataForm" method="post" action="#">
<div class="form-group">
<label class="control-label" for="commentInput">Comments</label>
<textarea class="commentInput" id="commentInput" cols="20" rows="5"></textarea>
</div>
<div class="form-group">
<label class="control-label" for="accountNameInput">Account name</label>
<input type="text" id="accountNameInput" name="accountNameInput" placeholder="Account name" class="form-control font-bold" value="" />
</div>
<input type="submit" class="btn btn-primary" value="Save" id="saveButton" />
</form>
You have to give all form fields that need validation a name attribute. That's where the validation plugin gets the reference to the element from.
From the documentation:
Throughout the documentation, two terms are used very often, so it's
important that you know their meaning in the context of the validation
plugin:
method: A validation method implements the logic to validate an element, like an email method that checks for the right format of a
text input's value. A set of standard methods is available, and it is
easy to write your own.
rule: A validation rule associates an element with a validation method, like "validate input with name "primary-mail" with
methods "required" and "email".
The name attribute is also required to be present on any form field that will need to transmit its data as part of the form submission.
$(function() {
$.validator.setDefaults({
errorClass: 'help-block',
highlight: function(element) {
$(element)
.closest('.form-group')
.addClass('has-error');
},
unhighlight: function(element, errorClass, validClass) {
$(element)
.closest('.form-group')
.removeClass('has-error')
.addClass('has-success');
},
});
$('#dataForm').validate({
rules: {
commentInput: {
required: true
},
accountNameInput: {
required: true
}
},
submitHandler: function(form) {
alert('success');
}
});
});
<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.17.0/jquery.validate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/js/bootstrap.min.js"></script>
<form id="dataForm" method="post" action="#">
<div class="form-group">
<label class="control-label" for="commentInput">Comments</label>
<textarea class="commentInput" id="commentInput" name="commentInput" cols="20" rows="5"></textarea>
</div>
<div class="form-group">
<label class="control-label" for="accountNameInput">Account name</label>
<input type="text" id="accountNameInput" name="accountNameInput" placeholder="Account name" class="form-control font-bold" value="" />
</div>
<input type="submit" class="btn btn-primary" value="Save" id="saveButton" />
</form>
The validation plugin targets by the name attribute:
<textarea id="commentInput" name="commentInput" cols="20" rows="5"></textarea>
You need use the name attribute for validate.
$(document).ready(function() {
$.validator.setDefaults({
errorClass: 'help-block',
highlight: function(element) {
$(element)
.closest('.form-group')
.addClass('has-error');
},
unhighlight: function(element, errorClass, validClass) {
$(element)
.closest('.form-group')
.removeClass('has-error')
.addClass('has-success');
},
});
$('#dataForm').validate({
rules: {
commentInput: {
required: true
},
accountNameInput: {
required: true
}
},
submitHandler: function(form) {
alert('success');
}
});
});
<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.17.0/jquery.validate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/js/bootstrap.min.js"></script>
<form id="dataForm" method="post" action="#">
<div class="form-group">
<label class="control-label" for="commentInput">Comments</label>
<textarea name="commentInput" class="commentInput" id="commentInput" cols="20" rows="5"></textarea>
</div>
<div class="form-group">
<label class="control-label" for="accountNameInput">Account name</label>
<input type="text" id="accountNameInput" name="accountNameInput" placeholder="Account name" class="form-control font-bold" value="" />
</div>
<input type="submit" class="btn btn-primary" value="Save" id="saveButton" />
</form>
I am trying to submit user details to a MailChimp list via PHP for multiple forms on the same page.
My code is as follows:
index.html
<form id="contact-form" name="contact-form" action="assets/php/send.php" method="post" novalidate="novalidate">
<fieldset>
<div id="alert-area"></div>
<input class="col-sm-6 col-xs-12" id="fname" type="text" name="fname" placeholder="first name">
<input class="col-sm-6 col-xs-12" id="lname" type="text" name="lname" placeholder="last name">
<input class="col-sm-6 col-xs-12" id="number" type="text" name="number" placeholder="number">
<input class="col-sm-6 col-xs-12" id="email" type="text" name="email" placeholder="email">
<input class="btn btn-default blue" id="submit" type="submit" name="submit" value="Submit" onclick="ga('send', 'event', ‘scholars’, 'click', ‘s-rs’);">
<div id='response'></div>
</fieldset>
</form>
<form id="contact-form" name="contact-form" action="assets/php/send.php" method="post" novalidate="novalidate">
<fieldset>
<div id="alert-area"></div>
<input class="col-sm-6 col-xs-12" id="fname" type="text" name="fname" placeholder="first name">
<input class="col-sm-6 col-xs-12" id="lname" type="text" name="lname" placeholder="last name">
<input class="col-sm-6 col-xs-12" id="number" type="text" name="number" placeholder="number">
<input class="col-sm-6 col-xs-12" id="email" type="text" name="email" placeholder="email">
<input class="btn btn-default blue" id="submit" type="submit" name="submit" value="Submit" onclick="ga('send', 'event', ‘scholars’, 'click', ‘s-rs’);">
<div id='response'></div>
</fieldset>
</form>
send.php
<?php
$api_key = 'XXXXXXXXX';
$list_id = 'XXXXXXXXXX';
// Include the MailChimp API wrapper
include('./inc/MailChimp.php');
// Then call/use the class
use \DrewM\MailChimp\MailChimp;
$MailChimp = new MailChimp($api_key);
// Submit subscriber data to MailChimp
$result = $MailChimp->post("lists/$list_id/members", [
'email_address' => $_POST["email"],
'merge_fields' => ['FNAME'=>$_POST["fname"], 'LNAME'=>$_POST["lname"], 'NUMBER'=>$_POST["number"]],
'status' => 'subscribed',
]);
if ($MailChimp->success()) {
// Success message
echo "<h4>Thank you for your interest. </h4>";
} else {
// Display error
echo "<h4>Whoops! Please try again.</h4>";
}
?>
Validate function
function validateForm(){
$('form').each(function(){
$(this).validate({
// all fields are required
rules: {
fname: {
required: true
},
lname: {
required: true
},
email: {
required: true,
email: true
},
number: {
required: true,
number: true
}
},
// if valid, post data via AJAX
submitHandler: function(form){
$.post("assets/php/send.php", {
fname: $("#fname").val(),
lname: $("#lname").val(),
email: $("#email").val(),
number: $("#number").val()
}, function (data) {
$('#response').html(data);
});
}
})
})
}
This works fine for the first form but gives a "Uncaught SyntaxError: Invalid or unexpected token" for other forms
The SyntaxError was because of rogue quote marks in the ga onCLick event.
Solved the multiple form submit issue with the following jQuery code
function validateForm(){
$('form').each(function(){
$(this).validate({
// all fields are required
rules: {
fname: {
required: true
},
lname: {
required: true
},
email: {
required: true,
email: true
},
number: {
required: true,
number: true
}
},
// if valid, post data via AJAX
submitHandler: function (form) {
$.post("assets/php/send.php", $(form).serializeArray().reduce(function(obj, item) {
obj[item.name] = item.value;
return obj;
}, {})
, function (data) {
$(form).find('#response').html(data);
});
}
})
})
}
All forms have unique ID. This code works with modal form too. Hope this helps!
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();
}
}
I'm using jquery validation plugin to validate a form. It is working if all fields are left blank. But if I entered a file in the input field and leave blank the other required fields it doesn't validate the other elements anymore it just submit the form to the server.
<script>
$().ready(function() {
$("#form1").validate({
submitHandler: function (form) {
$.ajax({
type: $(form).attr('method'),
url: $(form).attr('action'),
data: $(form).serialize(),
})
.done(function (response) {
jAlert(response);
});
return false;
},
ignore: [],
rules: {
title: { required: true, minlength: 2, maxlength: 25 },
text1: {
required: function() {
CKEDITOR.instances.text1.updateElement();
}
},
text2: {
required: function() {
CKEDITOR.instances.text2.updateElement();
}
},
newsimage: {
required: true,
accept: "image/*"
},
},
messages: {
title: {
required: "Please enter the Title",
minlength: "Title must consist of at least 2 characters"
},
text1: {
required: "Please enter text",
minlength: "Must consist of at least 2 characters"
},
text2: {
required: "Please enter text",
minlength: "Must consist of at least 2 characters"
}
}
});
});
</script>
Here's the form
<form id="Form1" enctype="multipart/form-data" method="post" action="save.php" >
Title: <input name="title" size="40" maxlength="255">
<br>
<label for="newsimage">News Image</label>
<input type="file" id="newsimage" name="newsimage">
<br> News Summary:
<textarea id="text1" name="text1" rows="7" cols="30"></textarea>
<script type="text/javascript">
CKEDITOR.replace( 'text1' );
</script>
<br> News Full Story:
<textarea id="text2" name="text2" rows="7" cols="30"></textarea>
<script type="text/javascript">
CKEDITOR.replace( 'text2' );
</script>
<br> <input type="submit" name="submit" value="Add News">
You could use required on your form tags like this :
<input name="title" size="40" maxlength="255" required>
that should force some input. ( it is not sanitized )
It wasn't working on my end because I was missing additional-methods.js, so adding it solve the problem.
<script src="js/additional-methods.min.js"></script>
Try this user friendly validation plugin
https://github.com/vanarajcs/jquery-form-validation
in order to activate any jquery validation library first of all you need to define that library below jquery cdn. your structure should be like this:
<!-- define jquery file -->
<!-- Now define jquery validation library -->
for a safer side define you jquery file on header and your validation library after main code.
This is my html
<div><center><b class="cust_heading">ONLINE FREIGHT QUOTES</b><br>
Instant prices with multiple carriers</center>
</div>
<div class="field_heading"><b>Shipment type* </b><span id="shipmentError" class="cust_error"></span></div>
<div class="fiftyPercent">
<input type="radio" name="shipment" value="export"> Export
</div>
<div class="fiftyPercent">
<input type="radio" name="shipment" value="import"> Import
</div>
<div class="field_heading"><b>Load type* </b><span id="loadError" class="cust_error"></span></div>
<div class="fiftyPercent">
<input type="radio" name="load" value="fcl"> FCL
</div>
<div class="fiftyPercent">
<input type="radio" name="load" value="lcl"> LCL
</div>
<div style="display:none; width:100%;" id="weight_volume_row">
<div class="fiftyPercent">
Weight (kg)*<span id="lcl_weightError" class="cust_error"></span><br><input type="text" name="lcl_weight" id="lcl_weight" value="" placeholder="e.g 100" style=" width:70%;">
</div>
<div class="fiftyPercent">
Volume (m<sup>3</sup>)*<span id="lcl_volumeError" class="cust_error"></span><br><input type="text" name="lcl_volume" id="lcl_volume" placeholder="e.g 1" value="" style=" width:70%;">
</div>
</div>
<div class="field_heading"><b id="cust_include_text">Include pickup* </b><span id="pickupError" class="cust_error"></span></div>
<div class="fiftyPercent">
<input type="radio" name="pickup" value="yes"> Yes
</div>
<div class="fiftyPercent">
<input type="radio" name="pickup" value="no"> No
</div>
<div class="field_heading"><b id="cust_zipcode_text">Pickup zip code* </b></div>
<div style="width:100%;">
<input id="pickupZipCode" placeholder="Enter a city or zip code" title="pickupZipCode" type="text" class="ui-autocomplete-input" autocomplete="off" role="textbox" aria-autocomplete="list" style=" width:85%;"><input type="hidden" name="postal_hid_data" id="postal_hid_data" value="">
<select name="choosePort" id="choosePort" style=" width:85%; display:none;"><option disabled="disabled" selected="selected" value="">Choose a port</option><option value="test1">test1</option><option value="test2">test2</option><option value="test3">test3</option></select>
<select name="choosePortOther" id="choosePortOther" style=" width:85%; display:none;"><option value="">Choose a port</option><option value="test4">test4</option><option value="test5">test5</option><option value="test6">test6</option></select>
<span id="zipError" class="cust_error"></span>
</div>
<div class="field_heading"><b id="cust_dest_text">Port of destination* </b></div>
<div style="width:100%;padding:5px 0px;">
<input id="destPort" placeholder="Enter a port or country" title="portDestination" type="text" class="ui-autocomplete-input" autocomplete="off" role="textbox" aria-autocomplete="list" style=" width:85%;"><input type="hidden" name="des_hid_data" id="des_hid_data" value="">
<span id="desError" class="cust_error"></span>
</div>
<div style="width:90%; float:left;padding:5px 0px;">
<input class="searchButton orange-bttn cust_btn" id="cust_form_submit" name="cust_form_submit" type="submit" value="Buscar Naviera" style="float:right;">
</div>
</div>
and my jquery validate form is lookin like this, what is it im doing wrong. Using the wrong form id?
$(function() {
$('cust_main_box').validate({
rules: {
pickupZipCodeUS: {
required: true
},
destPortUS: {
required: true
},
//lcl_weightForm2US: {
//required: true
//},
//lcl_volumeForm2US: {
//required: true
//},
},
messages: {
pickupZipCodeUS: {
required: 'Please enter a valid zip-code',
},
destPortUS: {
required: 'Please enter a valid port',
},
//lcl_weightForm2US: {
//required: 'Please enter a valid weight',
//},
//lcl_volumeForm2US: {
//required: 'Please enter a valid volume',
//},
}
)};
});
The code that was commented out had to do with another form within the jquery, I'd like to include it whenever i figure out what it is i'm doing wrong.
as #undefined already told you, proably the element should be .cust_main_box or #cust_main_box, but the problem in your code is validate closing:
)};
should be
});
So your correct JS:
$(function() {
$('#cust_main_box').validate({
rules: {
pickupZipCodeUS: {
required: true
},
destPortUS: {
required: true
}
//,lcl_weightForm2US: {
//required: true
//},
//lcl_volumeForm2US: {
//required: true
//},
},
messages: {
pickupZipCodeUS: {
required: 'Please enter a valid zip-code'
},
destPortUS: {
required: 'Please enter a valid port'
}
//,lcl_weightForm2US: {
//required: 'Please enter a valid weight',
//},
//lcl_volumeForm2US: {
//required: 'Please enter a valid volume',
//},
}
});
});
Your major problems:
1) The jQuery Validate plugin requires that all input elements to be validated must have name attributes. Those name attributes must also be where your declared rules are assigned.
<input type="text" name="pickupZipCodeUS" ...
<input type="text" name="destPortUS" ...
2) You are missing a form element. The jQuery Validate plugin can only work when the user input elements are contained within a set of <form></form> tags.
3) $('cust_main_box') is not a valid selector in this context. Give the new <form> element an id="cust_main_box" and change the selector to $('#cust_main_box').
<form id="cust_main_box" ...
4) The closing braces for your .validate() call are reversed. They should be this: }).
$('#cust_main_box').validate({
// rules & options
}); // <-- this here
Working Code:
$(function () {
$('#cust_main_box').validate({
rules: {
pickupZipCodeUS: { // <-- this is the field name
required: true
},
destPortUS: { // <-- this is the field name
required: true
}
},
messages: {
pickupZipCodeUS: {
required: 'Please enter a valid zip-code',
},
destPortUS: {
required: 'Please enter a valid port',
}
}
});
});
Working DEMO: http://jsfiddle.net/fTwsG/
You're using a bunch of invalid and deprecated markup, so you should also put your HTML through the W3C HTML Validation tool.