How to validate dropdown list using validator in js - javascript

I am trying to validate drop down in js. Here is my script code
$.validator.addMethod(
'drop_down_validation',
function (value, element) {
alert ("my_fun")
var val = $('#creative_offer_type').val();
alert (val);
if (value.length==0 && val=="") {
return false;
}
else return true;
},
$.format("must select atleast one value")
);
var form_rules = {
'creative[offer_type]' : {
required: true,
drop_down_validation: true
},
};
var form_messages = {
'creative_offer_type' : { required: 'You must specify Offer Type'},
};
Is is correct? I tried out like this, but doesn't show any response in UI.

For your reference
function JSFunctionValidate()
{
if(document.getElementById('<%=ddlView.ClientID%>').selectedIndex == 0)
{
alert("Please select ddl");
return false;
}
return true;
}
Just call this method in your dropdown..

Related

How can i change the Display type of a sublist field in a beforeLoad function?

Im trying to set the display type of a sublist field when the user is creating/viewing/editing an record.
This is for an Netsuite customization.
define(['N/ui/serverWidget'], function (serverWidget) {
function beforeLoad(serverWidget) {
if (scriptContext.type == scriptContext.UserEventType.VIEW ||
scriptContext.type == scriptContext.UserEventType.EDIT ||
scriptContext.type == scriptContext.UserEventType.CREATE) {
var form = serverWidget.createForm({
title: 'Movile - Requisition Costs Analyst'
});
var nomeFornecedor = form.getSublist({ id: 'item' }).getField({
id: 'vendorname'
});
nomeFornecedor.isDisabled = false;
}
}
return { beforeLoad: beforeLoad }
})
I expect to learn how to do that type of sublist editing.
Any help are apreciated!
define(['N/ui/serverWidget'], function (serverWidget) {
function beforeLoad(context) {
if (context.type == scriptContext.UserEventType.VIEW || context.type == scriptContext.UserEventType.EDIT || context.type == scriptContext.UserEventType.CREATE) {
var form = context.form;
form.title = 'Movile - Requisition Costs Analyst';
var nomeFornecedor = form.getSublist({ id: 'item' }).getField({
id: 'vendorname'
});
nomeFornecedor.updateDisplayType({displayType: serverWidget.FieldDisplayType.DISABLED});
}
}
return { beforeLoad: beforeLoad }
})

How to validate a form in jQuery?

I want to validate my data with jQuery or Javascript and send them to the server but why aren't they validated?
$(document).ready(function() {
var name = $('#signup-name').val();
var email = $('#signup-email').val();
var password = $('#signup-password').val();
var email_regex = new RegExp(/^[a-zA-Z0-9._-]+#[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/i);
var pass_regex = new RegExp(/^(?=.[0-9])(?=.[!##$%^&])[a-zA-Z0-9!##$%^&]{7,15}$/);
$('#signup-form').on('submit', function(e) {
e.preventDefault();
if (validate()) {
$.ajax({
type: 'post',
url: 'signup',
data: {
email: email,
password: password,
name: name
},
});
} else {
return false;
};
});
function validate() {
// name cheak here
if (name.length == "") {
$('.nameerror').html("Name field required !");
return false;
} else if (name.length = < 3) {
$('.nameerror').html("Name Should be greater than 3");
return false;
};
// email cheak here
if (email.length == "") {
$('.emailerror').html("Email field required !");
return false;
} else if (!email_regex.test(email)) {
$('.emailerror').html("Please enter correct email.");
return false;
};
// password cheak here
if (password.length == "") {
$('.passerror').html("password field required !");
return false;
} else if (!pass_regex.test(password)) {#
('.passerror').html("Minimum eight characters, at least one letter and one number:");
return false;
};
};
});
There are two major issues, you were just not passing the arguments to the validate function. I have updated your code with arguments passed to the function.
Furthermore, you never returned true for any function as a result nothing would be returned. Also your if statements are split and will contradict.
I have corrected these issues, hopefully this should work!
$(document).ready(function() {
$('#signup-form').on('submit', function(e) {
var name = $('#signup-name').val();
var email = $('#signup-email').val();
var password = $('#signup-password').val();
e.preventDefault();
if (validate(name, email, password)) {
$.ajax({
type: 'post',
url: 'signup',
data: {
email: email,
password: password,
name: name
},
});
} else {
return false;
};
});
});
function validate(name, email, password) {
var email_regex = new RegExp(/^[a-zA-Z0-9._-]+#[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/i);
var pass_regex = new RegExp(/^(?=.[0-9])(?=.[!##$%^&])[a-zA-Z0-9!##$%^&]{7,15}$/);
// name cheak here
if (name.length == 0) {
$('.nameerror').html("Name field required !");
return false;
} else if (name.length <= 3) {
$('.nameerror').html("Name Should be greater than 3");
return false;
} else if (email.length == 0) { //Check Email
$('.emailerror').html("Email field required !");
return false;
} else if (!email_regex.test(email)) {
$('.emailerror').html("Please enter correct email.");
return false;
} else if (password.length == 0) { // password cheak here
$('.passerror').html("password field required !");
return false;
} else if (!pass_regex.test(password)) {
('.passerror').html("Minimum eight characters, at least one letter and one number:");
return false;
} else {
return true;
}
};
I believe the issue is that, although the validate function does indeed have access to the variables name etc, these are just set once when the document is first ready, and never updated. The values of the variables should be set inside the event handler for the submit event, before validate is called.

Jquery validation is working for all field excepting cvv field

var toValidate = jQuery("#fullname, #address, #city, #state,#zip,#phone,#country,#expireMM,#expireYY,#card_number,#cvv_number"),
valid = false;
toValidate.keyup(function () {
if (jQuery(this).val().length > 0) {
jQuery(this).data('valid', true);
} else {
jQuery(this).data('valid', false);
}
toValidate.each(function () {
if (jQuery(this).data('valid') == true) {
valid = true;
} else {
valid = false;
}
});
if (valid === true) {
jQuery("#signInSubmit").prop('disabled', false);
} else {
jQuery("#signInSubmit").prop('disabled', true);
}
});
Above jquery validation working for all field excepting cvv.when i submit form if all field blank button remain disabled after filling all fields button enable but this not working for cvv field if all fields blank and i fill cvv field form submit and disable attribute remove.
The problem is here :
toValidate.each(function () {
if (jQuery(this).data('valid') == true) {
valid = true;
} else {
valid = false;
}
});
Here while checking all elements, cvv is the last element and as per the condition the value valid will be true. And because of it the your button is getting enabled.
You can do something like this :
var valid = true;
toValidate.each(function () {
if (jQuery(this).data('valid') == true && valid !== false) {
valid = true;
} else {
valid = false;
}
});
improve the code as per your requirement.

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.

Why does my form still submit when my javascript function returns false?

Here is my Javascript formvalidator function:
function companyName() {
var companyName = document.forms["SRinfo"]["companyName"].value;
if (companyName == ""){
return false;
} else {
return true;
}
}
function companyAdd() {
var companyAdd1 = document.forms["SRinfo"]["companyAdd1"].value;
if (companyAdd1 == ""){
return false;
} else {
return true;
}
}
function companyCity() {
var companyCity = document.forms["SRinfo"]["companyCity"].value;
if (companyCity == ""){
return false;
} else {
return true;
}
}
function companyZip() {
var companyZip = document.forms["SRinfo"]["companyZip"].value;
if (companyZip == ""){
return false;
} else {
return true;
}
}
function enteredByName() {
var enteredByName = document.forms["SRinfo"]["enteredByName"].value;
if (enteredByName == ""){
return false;
} else {
return true;
}
}
function dayPhArea() {
var dayPhArea = document.forms["SRinfo"]["dayPhArea"].value;
if (dayPhArea == ""){
return false;
}
}
function dayPhPre() {
var dayPhPre = document.forms["SRinfo"]["dayPhPre"].value;
if (dayPhPre == ""){
return false;
} else {
return true;
}
}
function dayPhSub() {
var dayPhSub = document.forms["SRinfo"]["dayPhSub"].value;
if (companyAdd1 == ""){
return false;
} else {
return true;
}
}
function validateForm() {
if (companyName() && companyAdd() && companyCity() && companyZip() && enteredByName() && dayPhArea() && dayPhPre() && dayPhSub()) {
return true;
} else {
window.alert("Please make sure that all required fields are completed.");
document.getElementByID("companyName").className = "reqInvalid";
companyName.focus();
return false;
}
}
Here are all of my includes, just in case one conflicts with another (I am using jquery for their toggle()):
<script type="text/javascript" src="formvalidator.js"></script>
<script type="text/javascript" src="autoTab.js"></script>
<?php
require_once('mobile_device_detect.php');
include_once('../db/serviceDBconnector.php');
$mobile = mobile_device_detect();
if ($mobile) {
header("Location: ../mobile/service/index.php");
if ($_GET['promo']) {
header("Location: ../mobile/service/index.php?promo=".$_GET['promo']);
}
}
?>
<script src="http://code.jquery.com/jquery-1.7.1.js"></script>
Here is my form tag with the function returned onSubmit:
<form method="POST" action="index.php" name="SRinfo" onsubmit="return validateForm();">
The validation works perfectly, I tested all fields and I keep getting the appropriate alert, however after the alert the form is submitted into mysql and sent as an email. Here is the code where I submit my POST data.
if($_SERVER['REQUEST_METHOD']=='POST') {
// Here I submit to Mysql database and email form submission using php mail()
It would seem to me that this line is likely blowing up:
companyName.focus();
The only definition I see for companyName is the function. You can't call focus on a function.
This blows up so the return false is never reached.
I would comment out all the code in the validation section and simply return false. If this stops the form from posting then there is an error in the actual code performing the validation. Add each part one at a time until the error is found.
My guess is the same as James suggests that you are calling focus on the function 'companyName'. The line above this seems to be trying to get the element from the document with the same name but you are not assigning this to a variable so that you can call focus on it.

Categories

Resources