I have added values Validate and Submit the a form. now i want to add a select box and add the data to the Validation
The plan is to have 2 dropdown boxes, collect all the select box data, Validate said data before submit using jQuery, Ajax, and PHP
Any ideas or suggestions? Thanks.
My JS code
<script>
function submitContactForm() {
var reg = /^[A-Z0-9._%+-]+#([A-Z0-9-]+\.)+[A-Z]{2,4}$/i;
var firstname = $('#inputfName').val();
var lastname = $('#inputlName').val();
var email = $('#inputEmail').val();
var telephone = $('#inputTel').val();
var category = $('#category').val();
var gender = $('#gender').val();
if (category.trim() == '') {
alert('Please select a category.');
$('#category').focus();
return false;
if (firstname.trim() == '') {
alert('Please enter your name.');
$('#inputfName').focus();
return false;
if (lastname.trim() == '') {
alert('Please enter your name.');
$('#inputlName').focus();
return false;
if (gender.trim() == '') {
alert('Please select your gender.');
$('#gender').focus();
return false;
} else if (email.trim() == '') {
alert('Please enter your email.');
$('#inputEmail').focus();
return false;
} else if (email.trim() != '' && !reg.test(email)) {
alert('Please enter valid email.');
$('#inputEmail').focus();
return false;
} else if (telephone.trim() == '') {
alert('Please enter your Phone Number.');
$('#inputTel').focus();
return false;
} else {
$.ajax({
type: 'POST',
url: 'submit_Vform.php',
data: 'contactFrmSubmit=1&firstname=' + firstname + '&lastname=' + lastname + '&email=' + email + '&gender=' + gender + '&category=' + category + '&telephone='
telephone,
beforeSend: function() {
$('.submitBtn').attr("disabled", "disabled");
$('.modal-body').css('opacity', '.5');
},
success: function(msg) {
if (msg == 'ok') {
$('#category').val('');
$('#inputfName').val('');
$('#inputlName').val('');
$('#gender').val('');
$('#inputEmail').val('');
$('#inputTel').val('');
$('.statusMsg').html('<h1> Thank you for your interest!</h1><p>We\'ll get back to you soon.</p>');
} else {
$('.statusMsg').html('<span style="color:red;">Some problem occurred, please try again.</span>');
}
$('.submitBtn').removeAttr("disabled");
$('.modal-body').css('opacity', '');
}
});
}
}
sample HTML of my the select box i wish to add
<div class="ui-widget">
<select id="drop">
<option value="">Select one...</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
</select>
</div>
While add a select, all you need to do is
get its value first by var drop = $('#drop').val();
validate it if (drop == '') ...
modified as below:
function submitContactForm() {
var reg = /^[A-Z0-9._%+-]+#([A-Z0-9-]+\.)+[A-Z]{2,4}$/i;
var firstname = $('#inputfName').val();
var lastname = $('#inputlName').val();
var email = $('#inputEmail').val();
var telephone = $('#inputTel').val();
var category = $('#category').val();
var gender = $('#gender').val();
var drop = $('#drop').val();
var drop2 = $('#drop2').val();
if (category.trim() == '') {
alert('Please select a category.');
$('#category').focus();
return false;
}
if (firstname.trim() == '') {
alert('Please enter your name.');
$('#inputfName').focus();
return false;
}
if (lastname.trim() == '') {
alert('Please enter your name.');
$('#inputlName').focus();
return false;
}
if (gender.trim() == '') {
alert('Please select your gender.');
$('#gender').focus();
return false;
}
if (email.trim() == '') {
alert('Please enter your email.');
$('#inputEmail').focus();
return false;
}
if (email.trim() != '' && !reg.test(email)) {
alert('Please enter valid email.');
$('#inputEmail').focus();
return false;
}
if (telephone.trim() == '') {
alert('Please enter your Phone Number.');
$('#inputTel').focus();
return false;
}
if (drop == '') {
alert('Please select drop\'s value');
return false;
}
if (drop2 == '') {
alert('Please select drop2\'s value');
return false;
}
$.ajax({
type: 'POST',
url: 'submit_Vform.php',
data: 'contactFrmSubmit=1&firstname=' + firstname + '&lastname=' + lastname + '&email=' + email + '&gender=' + gender + '&category=' + category + '&telephone='
telephone+ '&drop=' + drop + '&drop2=' + drop2,
beforeSend: function() {
$('.submitBtn').attr("disabled", "disabled");
$('.modal-body').css('opacity', '.5');
},
success: function(msg) {
if (msg == 'ok') {
$('#category').val('');
$('#inputfName').val('');
$('#inputlName').val('');
$('#gender').val('');
$('#inputEmail').val('');
$('#inputTel').val('');
$('#drop').val('');
$('#drop2').val('');
$('.statusMsg').html('<h1> Thank you for your interest!</h1><p>We\'ll get back to you soon.</p>');
} else {
$('.statusMsg').html('<span style="color:red;">Some problem occurred, please try again.</span>');
}
$('.submitBtn').removeAttr("disabled");
$('.modal-body').css('opacity', '');
}
});
}
Related
I have this block of javascript which is working just fine.
$('#<%=Button_PayFees.ClientID%>').click(function (evt) {
var valuefirstname = $('#<%=TextBox_FirstName.ClientID%>').val().toUpperCase();
var valuelastname = $('#<%=TextBox_LastName.ClientID%>').val().toUpperCase();
var valueaddress = $('#<%=TextBox_Address.ClientID%>').val().toUpperCase();
var valuecity = $('#<%=TextBox_City.ClientID%>').val().toUpperCase();
var valuestate = $('#<%=Dropdownlist_States.ClientID%>').val().toUpperCase();
var valuezipcode = $('#<%=TextBox_ZipCode.ClientID%>').val().toUpperCase();
var valuephone = $('#<%=TextBox_Phone.ClientID%>').val().toUpperCase();
var valueEmail = $('#<%=TextBox_EmailAddress.ClientID%>').val().toUpperCase();
var valuecreditcard = $('#<%=DropDownList_CreditCard.ClientID%>').val();
var valuecreditcardnumber = $('#<%=TextBox_CreditCard.ClientID%>').val().toUpperCase();
var valuecsvcode = $('#<%=TextBox_CSVCode.ClientID%>').val().toUpperCase();
var valueparticipantfirstname = $('#<%=TextBox_ParticipantFirstName.ClientID%>').val().toUpperCase();
var valueparticipantlastname = $('#<%=TextBox_ParticipantLastName.ClientID%>').val().toUpperCase();
var valueTeamName = $("#<%=DropDownList_CheerLevel.ClientID%>").find("option:selected").text();
var valueOrganization = $('#<%=TextBox_Organization.ClientID%>').val().toUpperCase();
var valuedeliveryfirstname = $('#<%=TextBox_DeliveryFirstName.ClientID%>').val().toUpperCase();
var valuedeliverylastname = $('#<%=TextBox_DeliveryLastName.ClientID%>').val().toUpperCase();
var valuedeliveryaddress = $('#<%=TextBox_DeliveryAddress.ClientID%>').val().toUpperCase();
var valuedeliverycity = $('#<%=TextBox_DeliveryCity.ClientID%>').val().toUpperCase();
var valuedeliverystate = $('#<%=DropDownList_DeliveryStates.ClientID%>').val().toUpperCase();
var valuedeliveryzipcode = $('#<%=TextBox_DeliveryZipCode.ClientID%>').val().toUpperCase();
if(valueparticipantfirstname == '' ){
alert('Participant firstname is required.');
evt.preventDefault();
$('#<%=TextBox_ParticipantFirstName.ClientID%>').focus();
}
else if (valueparticipantlastname == ''){
alert('Participant lastname is required.');
evt.preventDefault();
$('#<%=TextBox_ParticipantLastName.ClientID%>').focus();
}
else if (valueOrganization == '') {
alert('Organization is required.');
evt.preventDefault();
$('#<%=TextBox_Organization.ClientID%>').focus();
}
else if (valueTeamName == 'Select Cheer Level') {
alert('Select Cheer Level from the drop down list.');
evt.preventDefault();
$('#<%=DropDownList_CheerLevel.ClientID%>').focus();
}
else if (selection == 'Select DVD Option') {
alert('Please select a DVD option from the drop down list.');
evt.preventDefault();
$('#<%=DropDownList_Options.ClientID%>').focus();
}
else if (valuefirstname == '') {
alert('Firstname is required.');
evt.preventDefault();
$('#<%=TextBox_FirstName.ClientID%>').focus();
}
else if (valuelastname == ''){
alert('Lastname is required.');
evt.preventDefault();
$('#<%=TextBox_LastName.ClientID%>').focus();
}
else if(valueaddress == '') {
alert('Address is required.');
evt.preventDefault();
$('#<%=TextBox_Address.ClientID%>').focus();
}
else if(valuecity == '') {
alert('City is required.');
evt.preventDefault();
$('#<%=TextBox_City.ClientID%>').focus();
}
else if(valuestate == 'SELECT STATE') {
alert('Select state from the drop down list.');
evt.preventDefault();
$('#<%=DropDownList_States.ClientID%>').focus();
}
else if(valuezipcode == '') {
alert('Zip code is required.');
evt.preventDefault();
$('#<%=TextBox_ZipCode.ClientID%>').focus();
}
else if(valuephone == '') {
alert('Phone is required.');
evt.preventDefault();
$('#<%=TextBox_Phone.ClientID%>').focus();
}
else if(valueEmail == '') {
alert('Email Address is required.');
evt.preventDefault();
$('#<%=TextBox_EmailAddress.ClientID%>').focus();
}
else if(valuecreditcard == 'SELECT CARD TYPE') {
alert('Select credit card type from the drop down list.');
evt.preventDefault();
$('#<%=DropDownList_CreditCard.ClientID%>').focus();
}
else if(valuecreditcardnumber == '') {
alert('Enter credit card number.');
evt.preventDefault();
$('#<%=TextBox_CreditCard.ClientID%>').focus();
}
else if(valuecsvcode == '') {
alert('Enter credit card ID code.');
$('#<%=TextBox_CSVCode.ClientID%>').focus();
evt.preventDefault();
}
});
When I change it to add checks for delivery information when a checkbox is checked it crashes ... no idea why as I'm not getting any feed back from the site. The code that crashes is (note the nested else if):
$('#<%=Button_PayFees.ClientID%>').click(function (evt) {
var valuefirstname = $('#<%=TextBox_FirstName.ClientID%>').val().toUpperCase();
var valuelastname = $('#<%=TextBox_LastName.ClientID%>').val().toUpperCase();
var valueaddress = $('#<%=TextBox_Address.ClientID%>').val().toUpperCase();
var valuecity = $('#<%=TextBox_City.ClientID%>').val().toUpperCase();
var valuestate = $('#<%=Dropdownlist_States.ClientID%>').val().toUpperCase();
var valuezipcode = $('#<%=TextBox_ZipCode.ClientID%>').val().toUpperCase();
var valuephone = $('#<%=TextBox_Phone.ClientID%>').val().toUpperCase();
var valueEmail = $('#<%=TextBox_EmailAddress.ClientID%>').val().toUpperCase();
var valuecreditcard = $('#<%=DropDownList_CreditCard.ClientID%>').val();
var valuecreditcardnumber = $('#<%=TextBox_CreditCard.ClientID%>').val().toUpperCase();
var valuecsvcode = $('#<%=TextBox_CSVCode.ClientID%>').val().toUpperCase();
var valueparticipantfirstname = $('#<%=TextBox_ParticipantFirstName.ClientID%>').val().toUpperCase();
var valueparticipantlastname = $('#<%=TextBox_ParticipantLastName.ClientID%>').val().toUpperCase();
var valueTeamName = $("#<%=DropDownList_CheerLevel.ClientID%>").find("option:selected").text();
var valueOrganization = $('#<%=TextBox_Organization.ClientID%>').val().toUpperCase();
var valuedeliveryfirstname = $('#<%=TextBox_DeliveryFirstName.ClientID%>').val().toUpperCase();
var valuedeliverylastname = $('#<%=TextBox_DeliveryLastName.ClientID%>').val().toUpperCase();
var valuedeliveryaddress = $('#<%=TextBox_DeliveryAddress.ClientID%>').val().toUpperCase();
var valuedeliverycity = $('#<%=TextBox_DeliveryCity.ClientID%>').val().toUpperCase();
var valuedeliverystate = $('#<%=DropDownList_DeliveryStates.ClientID%>').val().toUpperCase();
var valuedeliveryzipcode = $('#<%=TextBox_DeliveryZipCode.ClientID%>').val().toUpperCase();
if(valueparticipantfirstname == '' ){
alert('Participant firstname is required.');
evt.preventDefault();
$('#<%=TextBox_ParticipantFirstName.ClientID%>').focus();
}
else if (valueparticipantlastname == ''){
alert('Participant lastname is required.');
evt.preventDefault();
$('#<%=TextBox_ParticipantLastName.ClientID%>').focus();
}
else if (valueOrganization == '') {
alert('Organization is required.');
evt.preventDefault();
$('#<%=TextBox_Organization.ClientID%>').focus();
}
else if (valueTeamName == 'Select Cheer Level') {
alert('Select Cheer Level from the drop down list.');
evt.preventDefault();
$('#<%=DropDownList_CheerLevel.ClientID%>').focus();
}
else if (selection == 'Select DVD Option') {
alert('Please select a DVD option from the drop down list.');
evt.preventDefault();
$('#<%=DropDownList_Options.ClientID%>').focus();
}
else if (valuefirstname == '') {
alert('Firstname is required.');
evt.preventDefault();
$('#<%=TextBox_FirstName.ClientID%>').focus();
}
else if (valuelastname == ''){
alert('Lastname is required.');
evt.preventDefault();
$('#<%=TextBox_LastName.ClientID%>').focus();
}
else if(valueaddress == '') {
alert('Address is required.');
evt.preventDefault();
$('#<%=TextBox_Address.ClientID%>').focus();
}
else if(valuecity == '') {
alert('City is required.');
evt.preventDefault();
$('#<%=TextBox_City.ClientID%>').focus();
}
else if(valuestate == 'SELECT STATE') {
alert('Select state from the drop down list.');
evt.preventDefault();
$('#<%=DropDownList_States.ClientID%>').focus();
}
else if(valuezipcode == '') {
alert('Zip code is required.');
evt.preventDefault();
$('#<%=TextBox_ZipCode.ClientID%>').focus();
}
else if(valuephone == '') {
alert('Phone is required.');
evt.preventDefault();
$('#<%=TextBox_Phone.ClientID%>').focus();
}
else if(valueEmail == '') {
alert('Email Address is required.');
evt.preventDefault();
$('#<%=TextBox_EmailAddress.ClientID%>').focus();
}
else if($('#<%= Checkbox_Delivery.ClientID %>').is(':checked')) {
else if (valuedeliveryfirstname == '') {
alert('Please enter the first name of the person the DVD is being delivered to.');
evt.preventDefault();
$('#<%=TextBox_DeliveryFirstName.ClientID%>').focus();
}
else if (valuedeliverylastname == '') {
alert('Please enter the last name of the person the DVD is being delivered to.');
evt.preventDefault();
$('#<%=TextBox_DeliveryLastName.ClientID%>').focus();
}
else if (valuedeliveryaddress == '') {
alert('Please enter the delivery Address.');
evt.preventDefault();
$('#<%=TextBox_DeliveryAddress.ClientID%>').focus();
}
else if (valuedeliverycity == '') {
alert('Please enter the delivery city.');
evt.preventDefault();
$('#<%=TextBox_DeliveryCity.ClientID%>').focus();
}
else if (valuedeliverystate == 'SELECT STATE') {
alert('Select the delivery state from the drop down list.');
evt.preventDefault();
$('#<%=DropDownList_DeliveryStates.ClientID%>').focus();
}
else if (valuedeliveryzipcode == '') {
alert('Please enter the delivery Zip code.');
evt.preventDefault();
$('#<%=TextBox_DeliveryZipCode.ClientID%>').focus();
}
}
else if(valuecreditcard == 'SELECT CARD TYPE') {
alert('Select credit card type from the drop down list.');
evt.preventDefault();
$('#<%=DropDownList_CreditCard.ClientID%>').focus();
}
else if(valuecreditcardnumber == '') {
alert('Enter credit card number.');
evt.preventDefault();
$('#<%=TextBox_CreditCard.ClientID%>').focus();
}
else if(valuecsvcode == '') {
alert('Enter credit card ID code.');
$('#<%=TextBox_CSVCode.ClientID%>').focus();
evt.preventDefault();
}
});
something in the nested else if causes the code to crash. I can't see it.
This doesn't look right!
else if($('#<%= Checkbox_Delivery.ClientID %>').is(':checked')) {
else if (valuedeliveryfirstname == '') {
The indented else if should just be if there is no preceeding if inside the block.
else if($('#<%= Checkbox_Delivery.ClientID %>').is(':checked')) {
if (valuedeliveryfirstname == '') {
First of all, you should not be using else if for all the other fields otherwise the if loop will exit when it enters the first matching condition. It should be:
if(valueparticipantfirstname == '' ){
alert('Participant firstname is required.');
evt.preventDefault();
$('#<%=TextBox_ParticipantFirstName.ClientID%>').focus();
}
if (valueparticipantlastname == ''){
alert('Participant lastname is required.');
evt.preventDefault();
$('#<%=TextBox_ParticipantLastName.ClientID%>').focus();
}
if (valueOrganization == '') {
alert('Organization is required.');
evt.preventDefault();
$('#<%=TextBox_Organization.ClientID%>').focus();
}
if (valueTeamName == 'Select Cheer Level') {
alert('Select Cheer Level from the drop down list.');
evt.preventDefault();
$('#<%=DropDownList_CheerLevel.ClientID%>').focus();
}
.
.
.
Also, this code:
else if($('#<%= Checkbox_Delivery.ClientID %>').is(':checked')) {
else if (valuedeliveryfirstname == '') {
needs to be changed to:
else if($('#<%= Checkbox_Delivery.ClientID %>').is(':checked')) {
if (valuedeliveryfirstname == '') {
.
.
.
I have a mobile and I want to check if the mobile number is less then 10 or greater then 13 then I want to show the message
My code:
<input name="mobile" id="mobile" placeholder="+91" class="form-control tboxs" type="text" style="font-family: 'JameelKhushkhatLRegular'">
<button style="width: 100%" type="button" id="submit" value="submit" class="btn-theme-colored btn">SUBMIT <span class="glyphicon glyphicon-send">
<script>
$('#submit').click(function(){
if($('#first_name').val() == '' ){
alert('Name can not be left blank and atleast 4 char long');
return false;
}else if(!$("input[name='redio_gender']:checked").val()){
alert('Please Select Gender');
return false;
}else if($('#multiple').val( ) == '') {
alert('Please Select Age');
return false;
}else if($('#profession').val( ) == '') {
alert('Please Select your Profession');
return false;
}else if($('#taluka').val( ) == '') {
alert('Please Select Taluka');
return false;
}else if($('#village').val( ) == '') {
alert('Please Enter village');
return false;
}else if($('#interest').val( ) == '') {
alert('Please Select Area of Interest');
return false;
}else if($('#masjid').val( ) == '') {
alert('Please Enter Nearest Masjid');
return false;
}else if($('#mobile').val( ) == '' || parseInt($('#mobile').val() < 10 ) || parseInt($('#mobile').val() > 13)) {
alert('Please Enter Valid Mobile Number');
return false;
}else{
$.ajax({
--
--
});
}
});
</script>
In the above code, I validate my code with javascript.
Try this :
var mob = '03311111111';
if( mob.length < 10 || mob.length > 13){
// show error message
}
https://jqueryvalidation.org
$.validator.addMethod(
'phone',
function (value, element, requiredValue) {
var phoneRegexp = /^\+380\d{7,10}$/;
return phoneRegexp.test(value);
},
);
var validator = $('#form_id').validate({
debug: true,
errorClass: 'error-class',
errorElement: 'div',
rules: {
'phone': {
required: true,
phone: true,
minlength: 10,
maxlength: 13
}
},
}
);
You can try the following:
$('#submit').click(function(){
var mobile = $('#mobile').val();
if(mobile.length < 10 || mobile.length > 13) {
//mobile length is less than 10 or greater than 13, show error message
}
});
Your final code would be this:
<script>
$('#submit').click(function(){
var mobile = $('#mobile').val();
if($('#first_name').val() == '' ){
alert('Name can not be left blank and at least 4 char long');
return false;
} else if(!$("input[name='redio_gender']:checked").val()){
alert('Please Select Gender');
return false;
} else if($('#multiple').val( ) == '') {
alert('Please Select Age');
return false;
} else if($('#profession').val( ) == '') {
alert('Please Select your Profession');
return false;
} else if($('#taluka').val( ) == '') {
alert('Please Select Taluka');
return false;
} else if($('#village').val( ) == '') {
alert('Please Enter village');
return false;
} else if($('#interest').val( ) == '') {
alert('Please Select Area of Interest');
return false;
} else if($('#masjid').val( ) == '') {
alert('Please Enter Nearest Masjid');
return false;
} else if(mobile.length < 10 || mobile.length > 13) {
alert('Please Enter Valid Mobile Number');
return false;
} else {
$.ajax({
--
--
});
}
});
</script>
Or you could use html attributes to do that by using minlength and maxlength on the text input and you may even want to switch the input type from text to tel
<input name="mobile" id="mobile" placeholder="+91" class="form-control tboxs" type="tel" style="font-family: 'JameelKhushkhatLRegular'" minlength='10' maxlength='13'>
I am attempting to validate 6 functions on a form. I am getting the appropriate alerts set for each function but the form does not seem to be validating correctly and is submitting the form when the 'Generate' button is pressed.
I would be extremely grateful for any advice on this
This is how I have it set at present:
function ValidateFields(){
//Validate all Required Fields
if (RequiredTextValidate()&& CheckDateTime()&& ReasonAbsenceValidate()&&
ReturnDateChanged() && FirstDateChanged() && ActualDateChanged())return true;
}
<script type="text/javascript" language="Javascript">
function RequiredTextValidate() {
//check all required fields are completed
if (document.getElementById("<%=CompletedByTextBox.ClientID%>").value == "") {
alert("Completed by field cannot be blank");
document.getElementById("<%=CompletedByTextBox.ClientID%>").focus();
return false;
}
if (document.getElementById("<%=CompletedExtTextBox.ClientID %>").value == "") {
alert("Completed By Extension field cannot be blank");
document.getElementById("<%=CompletedExtTextBox.ClientID %>").focus();
return false;
}
if (document.getElementById("<%=EmployeeNoTextBox.ClientID %>").value == "") {
alert("Employee No field cannot be blank");
document.getElementById("<%=EmployeeNoTextBox.ClientID %>").focus();
return false;
}
if (document.getElementById("<%=EmployeeNameTextBox.ClientID %>").value == "") {
alert("Employee Name field cannot be blank");
document.getElementById("<%=EmployeeNameTextBox.ClientID %>").focus();
return false;
}
return true;
}
function CheckDateTime() {
// regular expression to match required date format
re = /^\d{1,2}\/\d{1,2}\/\d{4}$/;
if (document.getElementById("<%=SickDateTextBox.ClientID %>").value != '' && !document.getElementById("<%=SickDateTextBox.ClientID %>").value.match(re)) {
alert("Invalid date format: " + document.getElementById("<%=SickDateTextBox.ClientID %>").value);
document.getElementById("<%=SickDateTextBox.ClientID %>").focus();
return false;
}
// regular expression to match required time format
re = /^\d{1,2}:\d{2}([ap]m)?$/;
if (document.getElementById("<%=SickTimeTextBox.ClientID %>").value != '' && !document.getElementById("<%=SickTimeTextBox.ClientID %>").value.match(re)) {
alert("Invalid time format: " + document.getElementById("<%=SickTimeTextBox.ClientID %>").value);
document.getElementById("<%=SickTimeTextBox.ClientID %>").focus();
return false;
}
return true;
}
function ReasonAbsenceValidate() {
//check that reason for absence field is completed
if (document.getElementById("<%=ReasonTextBox.ClientID%>").value == "") {
alert("Reason for absence field cannot be blank");
document.getElementById("<%=ReasonTextBox.ClientID%>").focus();
return false;
}
return true;
}
function ReturnDateChanged() {
// check that either Return date or Date Unknown fields are completed
var ReturnDateValid = document.getElementById("<%=ReturnDateTextBox.ClientID%>").value;
var ReturnDateUnknown = document.getElementById("<%=ReturnUnknownCheckBox.ClientID%>").checked;
if (ReturnDateUnknown.checked)
{
ReturnDateValid.disabled = false;
ReturnDateUnknown.disabled = "disabled";
}
if (ReturnDateValid == "" && ReturnDateUnknown == "") {
alert("You must enter at least one field for anticipated return");
return false;
}
return true;
}
function FirstDateChanged() {
// check that either First date of sickness or Date Unknown fields are completed
var FirstDateValid = document.getElementById("<%=FirstDateTextBox.ClientID%>").value;
var FirstDateUnknown = document.getElementById("<%=FirstDateUnknownCheckBox.ClientID%>").checked;
if (FirstDateUnknown.checked)
{
FirstDateValid.disabled = false;
FirstDateUnknown.disabled = "disabled";
}
if (FirstDateValid == "" && FirstDateUnknown == "") {
alert("You must enter at least one field for first day of sickness");
return false;
}
return true;
}
function ActualDateChanged() {
// check that either Actual date of return or Date Unknown fields are completed
var ActualDateValid = document.getElementById("<%=ActualDateTextBox.ClientID%>").value;
var ActualDateUnknown = document.getElementById("<%=ActualDateUnknownCheckBox.ClientID%>").checked;
if (ActualDateUnknown.checked)
{
ActualDateValid.disabled = false;
ActualDateUnknown.disabled = "disabled";
}
if (ActualDateValid == "" && ActualDateUnknown == "") {
alert("You must enter at least one field for actual date of return");
return false;
}
return true;
}
function ValidateFields(){
//Validate all Required Fields
if (RequiredTextValidate()&& CheckDateTime()&& ReasonAbsenceValidate()&&
ReturnDateChanged() && FirstDateChanged() && ActualDateChanged())return true;
}
</script>
update function like following:
You need to return flase in case of invalid input to prevent form from being posted.
function ValidateFields() {
//Validate all Required Fields
if (RequiredTextValidate() && CheckDateTime() && ReasonAbsenceValidate() && ReturnDateChanged() && FirstDateChanged() && ActualDateChanged()) {
return true;
} else {
return false;
}
}
Update
if (document.getElementById("<%=SickTimeTextBox.ClientID %>").value != '' &&
!document.getElementById("<%=SickTimeTextBox.ClientID %>").value.match(re))
condition seems to be wrong. It should be like following.
if (document.getElementById("<%=SickTimeTextBox.ClientID %>").value == '' &&
!document.getElementById("<%=SickTimeTextBox.ClientID %>").value.match(re))
Use == instead of != operator.
I am using 3 javascript functions for textfield validation,
validate all the fields once all the fields are properly entered
yes/cancel confirmation should be also along with a
pop up window with the textfilled values which are display in a pageto verify entered values are correct
Once i select yes my button click event should occur if no is selected nothing sholud happen. pop up window can be closed by the user
Here is my js script,
I am getting all my textfields validated and getting confirmation box yes/cancel but popup window page is not displaying
<script type="text/javascript">
function UserDetailsConfirmation() {
return confirm("Are you sure you want to add this ?");
return openwin();
}
function openwin() {
window.open('PopupForConfirm.aspx?name1=' + name + '&age1=' + age + '&gen=' + gender + '', 'open_window', ' width=640, height=480, left=0, top=0');
}
function validate() {
var name= document.getElementById('<%=this.txtname.ClientID %>');
var age= document.getElementById('<%=this.txtage.ClientID %>');
var gender= document.getElementById('<%=this.txtgender.ClientID %>');
if (name.value) == "") {
alert("Please Enter Name");
name.focus();
return false;
}
else if (age.value) == "") {
alert("Please Enter age");
age.focus();
return false;
}
else if (gender.value) == "") {
alert("Please enter gender");
gender.focus();
return false;
}
else if (!UserDetailsConfirmation()) {
return false;
}
else {
return true;
}
}
</script>
You return right before you call openwin. How could it be reached? How about:
function UserDetailsConfirmation() {
return confirm("Are you sure you want to add this ?") && openwin();
}
BTW:
if (!UserDetailsConfirmation()) {
return false;
}
else {
return true;
}
boils down to:
return UserDetailsConfirmation();
<script type="text/javascript">
function UserDetailsConfirmation() {
var r = confirm("Are you sure you want to add this ?");
if (r == true) {
openwin();
} else {
return false;
}
}
function openwin() {
window.open('PopupForConfirm.aspx?name1=' + name + '&age1=' + age + '&gen=' + gender + '', 'open_window', ' width=640, height=480, left=0, top=0');
}
function validate() {
var name= document.getElementById('<%=this.txtname.ClientID %>');
var age= document.getElementById('<%=this.txtage.ClientID %>');
var gender= document.getElementById('<%=this.txtgender.ClientID %>');
if (name.value) == "") {
alert("Please Enter Name");
name.focus();
return false;
}
else if (age.value) == "") {
alert("Please Enter age");
age.focus();
return false;
}
else if (gender.value) == "") {
alert("Please enter gender");
gender.focus();
return false;
}
else if (!UserDetailsConfirmation()) {
return false;
}
else {
return true;
}
}
</script>
I have changed your code a bit ... While opening a popup return is not needed
I think this is enough to work
Try this on your onclick, call UserDetailsConfirmation:
<script type="text/javascript">
function UserDetailsConfirmation() {
if(validate() == true)
{
var r = confirm("Are you sure you want to add this ?");
if (r == true) {
openwin();
}
} else {
alert('Something went wrong');
}
}
function openwin() {
window.open('PopupForConfirm.aspx?name1=' + name + '&age1=' + age + '&gen=' + gender + '', 'open_window', ' width=640, height=480, left=0, top=0');
}
function validate() {
var name= document.getElementById('<%=this.txtname.ClientID %>');
var age= document.getElementById('<%=this.txtage.ClientID %>');
var gender= document.getElementById('<%=this.txtgender.ClientID %>');
if (name.value) == "") {
alert("Please Enter Name");
name.focus();
return false;
}
else if (age.value) == "") {
alert("Please Enter age");
age.focus();
return false;
}
else if (gender.value) == "") {
alert("Please enter gender");
gender.focus();
return false;
}
else{
return true;
}
}
</script>
Edited Option 2
This is actually based on your code..
<script type="text/javascript">
function UserDetailsConfirmation() {
return confirm("Are you sure you want to add this ?");
}
function openwin() {
window.open('PopupForConfirm.aspx?name1=' + name + '&age1=' + age + '&gen=' + gender + '', 'open_window', ' width=640, height=480, left=0, top=0');
}
function validate() {
var name= document.getElementById('<%=this.txtname.ClientID %>');
var age= document.getElementById('<%=this.txtage.ClientID %>');
var gender= document.getElementById('<%=this.txtgender.ClientID %>');
if (name.value) == "") {
alert("Please Enter Name");
name.focus();
return false;
}
else if (age.value) == "") {
alert("Please Enter age");
age.focus();
return false;
}
else if (gender.value) == "") {
alert("Please enter gender");
gender.focus();
return false;
}
else if (UserDetailsConfirmation() == true) {
openwin();
}
else{
return false;
}
}
</script>
My Jquery validation is not working, below is the script coding. I am getting a
Fatal error: Uncaught exception
error and not sure why. I know one of the reasons can be the validation code isnt correct. Is the coding correct or is there errors?
<script type="text/javascript">
$('form#contact').submit(function(e) {
var isValidZip = /(^\d{5}$)|(^\d{5}-\d{4}$)/.test(jQuery('#form_zip').val());
var isValidYear = /^\d{4}$/.test(jQuery('#gradDate').val());
var year_number = parseInt(jQuery('#gradDate').val());
var isValidEmail = /^(([^<>()[\]\\.,;:\s#\"]+(\.[^<>()[\]\\.,;:\s#\"]+)*)|(\".+\"))#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(jQuery('#form_email').val());
var first_name = jQuery.trim(jQuery('#first_name').val());
var last_name = jQuery.trim(jQuery('#last_name').val());
var form_email = jQuery.trim(jQuery('#form_email').val());
var street = jQuery.trim(jQuery('#street').val());
var city = jQuery.trim(jQuery('#city').val());
var state = jQuery.trim(jQuery('#state').val());
var isValidPhone = /^[2-9]\d{2}[2-9]\d{2}\d{4}$/.test(jQuery('#phone_day').val());
function validZip(zip)
{
if (zip.match(/^[0-9]{5}$/)) {
return true;
}
zip=zip.toUpperCase();
if (zip.match(/^[A-Z][0-9][A-Z][0-9][A-Z][0-9]$/)) {
return true;
}
if (zip.match(/^[A-Z][0-9][A-Z].[0-9][A-Z][0-9]$/)) {
return true;
}
return false;
}
if(!validZip(jQuery('#form_zip').val())){
alert('Please enter a valid Zip Code.');
}
else if(!isValidYear || (year_number > <?php echo date('Y')?>)){
alert('Please enter a valid High School Graduation Year.');
}
else if(!isValidEmail (jQuery('#form_email').val())){
alert('Please enter a valid Email Address.');
}
else if(first_name.length <= 0 || first_name == 'First Name' || (!first_name.match(/[a-zA-Z]/)) || (first_name.match(/[0-9]/))){
alert('Please enter your First Name.');
}
else if(last_name.length <= 0 || last_name == 'Last Name' || (!last_name.match(/[a-zA-Z]/)) || (last_name.match(/[0-9]/))){
alert('Please enter your Last Name.');
}
else if(street.length <= 0 || street == 'Street Address'){
alert('Please enter your Street Address.');
}
else if(city.length <= 0 || city == 'City'){
alert('Please enter your City.');
}
else if(state.length <= 0 || state == 'State'){
alert('Please enter your State by 2 letter abbreviation.');
}
else if(country.length <= 0 || country == 'Other'){
alert('Please enter your Country.');
}
else if(!isValidPhone){
alert('If your phone number is correct, close this box and then Click the button in the form.');
}
else {
$('form#mainform').submit();
}
return false;
}
return false;
}
});
</script>
You have php inside your JavaScript code:
else if(!isValidYear || (year_number > <?php echo date('Y')?>)){