jQuery plugin, return value from function - javascript

Markup:
<input type="text" name="email" />
Code:
$(':text').focusout(function(){
$(this).validate(function(){
$(this).attr('name');
});
});
Plugin:
(function($){
$.fn.validate = function(type) {
return this.each(function(type) {
if (type == 'email') {
matches = this.val().match('/.+#.+\..{2,7}/');
(matches != null) ? alert('valid') : alert('invalid');
}
/*else if (type == 'name') {
}
else if (type == 'age') {
}
else if (type == 'text') {
}*/
else {
alert('total failure');
}
});
};
})(jQuery);
The problem is that when I execute the code above, it runs the plugin as if type was a string: "function(){
$(this).attr('name');
});" instead of executing it as a function. How do I solve this?

You must check if the parameter is a function. If yes use the return value else assume it's a literal value.
(function($) {
$.fn.validate = function(type) {
//check if type type is a function else take it as literal
type = typeof type !== "function" ? type : type();
return this.each(function(type) {
...
});
};
})(jQuery);

Related

Show Validation in Signature field when field value is false?

I have to try to show validation when my signature field is blank. i am use alert message but it's not working like i am click on OK button and also show validation message but it's save form. So any one suggest me how to stop this continue show validation message if my field is blank and i have try to save.
My code is below :
on_save_sign: function(value_) {
var self = this;
this.$el.find('> img').remove();
var signature = self.$el.find(".signature").jSignature("getData",'image');
var is_empty = signature
? self.empty_sign[1] === signature[1]
: false;
if (! is_empty && typeof signature !== "undefined" && signature[1]) {
self.set('value',signature[1]);
}
else {
alert('Signature First');
self.do_warn(_t("Signature First"));
}
},
You can try following code.
on_save_sign: function(value_) {
var self = this;
this.$el.find('> img').remove();
var signature = self.$el.find(".signature").jSignature("getData",'image');
var is_empty = signature
? self.empty_sign[1] === signature[1]
: false;
if(is_empty){
self.do_warn("Please enter valid signature.")
}
if (! is_empty && typeof signature !== "undefined" && signature[1]) {
self.set('value',signature[1]);
}
},
Hope It will help you. If still not working try to use debug assets and reload the page. check your updated code is there by adding console in above conditions.
Have a good day !
on_save_sign: function(value_) {
this.$el.find('> img').remove();
var signature = this.$el.find(".signature").jSignature("getData", 'image');
var is_empty = signature
? this.empty_sign[1] === signature[1]
: false;
if (is_empty) {
this.do_warn("Please enter valid signature.")
}
else {
this.set('value', signature[1]);
}
}

Specifying validation for specific form in some page

I have a javascript function that validate a popup form before submit it. Unfortunately it's created to handle one popup form per page only.
In my case, i have two different popup forms, so i want to specify what to do and also for which one.
$.fn.goValidate = function() {
var $form = this,
$inputs = $form.find('input:text');
var validators = {
email: {
regex: /^[\w\-\.\+]+\#[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/
}
};
var validate = function(klass, value) {
var isValid = true,
error = '';
if (!value && /required/.test(klass)) {
error = 'This field is required';
isValid = false;
} else {
klass = klass.split(/\s/);
$.each(klass, function(i, k){
if (validators[k]) {
if (value && !validators[k].regex.test(value)) {
isValid = false;
error = validators[k].error;
}
}
});
}
return {
isValid: isValid,
error: error
}
};
var showError = function($input) {
var klass = $input.attr('class'),
value = $input.val(),
test = validate(klass, value);
$input.removeClass('invalid');
$('#form-error').addClass('hide');
if (!test.isValid) {
$input.addClass('invalid');
if(typeof $input.data("shown") == "undefined" || $input.data("shown") == false){
$input.popover('show');
}
}
else {
$input.popover('hide');
}
};
$inputs.keyup(function() {
showError($(this));
});
$inputs.on('shown.bs.popover', function () {
$(this).data("shown",true);
});
$inputs.on('hidden.bs.popover', function () {
$(this).data("shown",false);
});
$form.submit(function(e) {
$inputs.each(function() {
if ($(this).is('.required') || $(this).hasClass('invalid')) {
showError($(this));
}
});
if ($form.find('input.invalid').length) {
e.preventDefault();
$('#form-error').toggleClass('hide');
}
});
return this;
};
$('form').goValidate();
I'm pretty sure that it's all about this line:
$('form').goValidate();
Let's say that the first form id is form_1 and the second form_2.
What should i put in this line?
Something like this i guess:
$('form['form_1]').goValidate();
Hope it was clear, thanks !
You can use form id to target your form.
ex. if your first form has id form1 then you can write.
$('#form1').goValidate();
and same as second one.

Confirm msg before submitting a form

i am validating a form and then asking for the confiormation through javascript…
so on submit i have called two function name validate() & make_confirm()..
onsubmit="return(validate() && show_alert(this));"
by this i am partially able to call both function but confirmation part is not working fine i have to redirect it to another page while pressing OK but its not going please help me out
validate & make_sure() function is as like:
function validate() {
if(document.getElementById('cname').value == '')
{
alert('Please enter your name');
document.getElementById('cname').focus();
return false;
}
else if(document.getElementById('address').value == '')
{
alert('Please enter your address');
document.getElementById('address').focus();
return false;
}
else if(document.getElementById('city').value == '')
{
alert('Please choose your city');
document.getElementById('city').focus();
return false;
}
else if(document.getElementById('state').value == '')
{
alert('Please enter your state');
document.getElementById('state').focus();
return false;
}
function make_sure() {
if(confirm("Do you really want to do this?"))
document.forms[0].submit();
else
return false;
}
Use one function for validate and confirm and set action of form to redirect form current page to another page.
function validateAndConfirm() {
if( isEmpty(id('cname').value) ) {
alert('Please enter your name');
id('cname').focus();
return false;
}
else if( isEmpty(id('address').value) ) {
alert('Please enter your address');
id('address').focus();
return false;
}
else if( isEmpty(id('city').value) ) {
alert('Please choose your city');
document.getElementById('city').focus();
return false;
}
else if( isEmpty(id('state').value) ) {
alert('Please enter your state');
id('state').focus();
return false;
} else {
if(confirm("Do you really want to do this?")) {
document.forms[0].submit();
}
else {
return false;
}
}
}
function isEmpty(val){
return (typeof val == 'undefined' || val === undefined || val == null || val.length <= 0) ? true : false;
}
// this function help to simplify you writing : document.getElementById to just id
function id(sid){
return document.getElementById(sid);
}

JavaScript Required Validation on Input not working

I have 2 simple JS function one checks values of 2 input fields and triggers the other function Here is the code
function ValidateForm()
{
var name = document.getElementById('fullname').value;
var email = document.getElementById('email').value;
if(name.value= '' || email.value='')
{
alert('fields Empty');
}
else
{
UpdateRecord();
}
}
function UpdateRecord()
{
var Qact = getQueryVariable('ACT');
if(Qact==2){
var picture= document.getElementById('myPic').src;
activity.setUpdates(name,email,picture);
}
else
{
activity.CheckEmail(name,email);
}
}
HTML
<button onClick="ValidateForm();" data-role="button" >Register</button>
if I call UpdateRecord() on button click it works fine but when i use ValidateForm() nothing works. The firefox debugger don't even go to the ValidateForm() Function
if(name.value= '' || email.value='')
should be
if(name === '' || email === '')
if(name.value== '' || email.value=='')
{
alert('fields Empty');
}
else
{
UpdateRecord();
}
Try this to compare values:
if(name.value == '' || email.value == '')
{
alert('fields Empty');
}
else
{
UpdateRecord();
}

javascript if() dont work

I have PHP and JS script for uploading image. PHP file returns a var err:type and I'm checking in JS if return == err:type, but it doesn't work.
$(document).ready
(
function()
{
$('#avatar_image_upload_form').submit
(
function()
{
$('div#avatar_ajax_upload_demo img').attr('src','../../Files/Border/loading.gif');
}
);
$('iframe[name=avatar_upload_to]').load(
function()
{
var result = $(this).contents().text();
if(result !='')
{
$('div#avatar_ajax_upload_demo img').attr('src',result);
if(result == 'err:size')
{
$('div#avatar_ajax_upload_demo img').attr('src','../../Files/Border/avatar_big.jpg');
}
if (result == 'err:type')
{
$('div#avatar_ajax_upload_demo img').attr('src','../../Files/Border/avatar_invalid.jpg');
}
}
}
);
}
);
if(result == 'err:type') doesn't work, but result = "err:type"
According to this image:
There are a lot of white lines at the beginning of the string. You need to trim the result string to remove them:
var result = $(this).contents().text().trim();
You should best fix your PHP code in order not to send those blank lines.
[WRONG]
Maybe your error is here : (if avatar_upload_to isn't a variable)
$('iframe[name=avatar_upload_to]').load(
Should be
$('iframe[name="avatar_upload_to"]').load(
=====
[TEST]
What appends if you make this :
$('iframe[name=avatar_upload_to]').load(
function()
{
var result = $(this).contents().text();
console.log(result);
//or
alert(':'+result+':');
if(result !='')
{
$('div#avatar_ajax_upload_demo img').attr('src',result);
if(result == 'err:size')
{
$('div#avatar_ajax_upload_demo img').attr('src','../../Files/Border/avatar_big.jpg');
}
if (result == 'err:type')
{
$('div#avatar_ajax_upload_demo img').attr('src','../../Files/Border/avatar_invalid.jpg');
}
}
}
);

Categories

Resources