jQuery if select is not selected add error - javascript

I'm trying to make the <select id="jobCategory"> and job <select id="industry"> fields mandatory by adding a error message.
Not sure if I have to make them also disable in order to do it properly.
My if statement doesn't work for both field.
Error message in red doesn't show.
var maleFemale = '';
$('#submitBtn').click(function() {
var errors = false;
if (maleFemale == '') {
errors = true;
$('#areYou').css('color', '#F00');
} else {
$('#areYou').css('color', '#000');
}
if ($("#twitterInput").val() == '' || $("#twitterInput").val() == '#yourname' || $("#twitterInput").val() == '#') {
errors = true;
$('#enterTwitterHandle').css('color', '#F00');
} else {
$('#enterTwitterHandle').css('color', '#000');
}
if ($('#jobCategory option:selected').length == 0) {
alert('nothing selected');
$('#enterCategory').css('color', '#F00');
} else {
$('#enterCategory').css('color', '#000');
}
if ($('#industry option:selected').length == 0) {
alert('nothing selected');
$('#enterIndustry').css('color', '#F00');
} else {
$('#enterIndustry').css('color', '#000');
}
if (!errors) {
$('body').addClass('submitted');
}
});
#submitBtn {
border: 1px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='form'>
<p id='areYou'>Are you...</p>
<div id='maleFemaleSelector'>
<p class='maleFemaleSelectorBtn transform' id='maleBtn'>Male</p>
<p class='maleFemaleSelectorBtn transform' id='femaleBtn'>Female</p>
<div style='clear:both'></div>
</div>
<p id='enterTwitterHandle'>Enter a Twitter handle</p>
<input type='text' id='twitterInput' value='#yourname' />
<div style='clear:both'></div>
<p id='enterCategory'>Select your job category</p>
<select id="jobCategory" class="select">
<option value="" disabled selected>job category</option>
<option value="it"> IT</option>
<option value="finance">Finance</option>
<option value="hr">HR</option>
<option value="marketing">Marketing</option>
<option value="security">Security</option>
<option value="developer">Developer</option>
<option value="others">Others</option>
</select>
<div style='clear:both'></div>
<p id='enterIndustry'>Select your industry</p>
<select id="industry" class="select">
<option value="" disabled selected>industry</option>
<option value="retail">Retail</option>
<option value="travel-transportation">Travel & Transportation</option>
<option value="telco-media">Telco / Media</option>
<option value="banking">Banking</option>
<option value="health-government">Health & Government</option>
<option value="energy-utilities">Energy & Utilities</option>
</select>
<p id='submitBtn'>Discover your AI iD</p>
<div style='clear:both'></div>
</div>


If you change:
if ($('#jobCategory option:selected').length == 0) {
to
if ($('#jobCategory option:selected').val() == '') {
And
if ($('#industry option:selected').length == 0)
to
if ($('#industry option:selected').val() == '')
this should work.
The original one finds the length == '12' (which is not 0) because the text inside the option is 'job category' which is 12 charactors long.
the new one will search for the values instead, which only == '' on
<option value="" disabled selected>job category</option> which is basically nothing selected.
Working example:
var maleFemale = '';
$('#submitBtn').click(function() {
var errors = false;
if (maleFemale == '') {
errors = true;
$('#areYou').css('color', '#F00');
} else {
$('#areYou').css('color', '#000');
}
if ($("#twitterInput").val() == '' || $("#twitterInput").val() == '#yourname' || $("#twitterInput").val() == '#') {
errors = true;
$('#enterTwitterHandle').css('color', '#F00');
} else {
$('#enterTwitterHandle').css('color', '#000');
}
if ($('#jobCategory option:selected').val() == '') {
alert('nothing selected');
$('#enterCategory').css('color', '#F00');
} else {
$('#enterCategory').css('color', '#000');
}
if ($('#industry option:selected').val() == '') {
alert('nothing selected');
$('#enterIndustry').css('color', '#F00');
} else {
$('#enterIndustry').css('color', '#000');
}
if (!errors) {
$('body').addClass('submitted');
}
});
#submitBtn {
border: 1px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='form'>
<p id='areYou'>Are you...</p>
<div id='maleFemaleSelector'>
<p class='maleFemaleSelectorBtn transform' id='maleBtn'>Male</p>
<p class='maleFemaleSelectorBtn transform' id='femaleBtn'>Female</p>
<div style='clear:both'></div>
</div>
<p id='enterTwitterHandle'>Enter a Twitter handle</p>
<input type='text' id='twitterInput' value='#yourname' />
<div style='clear:both'></div>
<p id='enterCategory'>Select your job category</p>
<select id="jobCategory" class="select">
<option value="" disabled selected>job category</option>
<option value="it"> IT</option>
<option value="finance">Finance</option>
<option value="hr">HR</option>
<option value="marketing">Marketing</option>
<option value="security">Security</option>
<option value="developer">Developer</option>
<option value="others">Others</option>
</select>
<div style='clear:both'></div>
<p id='enterIndustry'>Select your industry</p>
<select id="industry" class="select">
<option value="" disabled selected>industry</option>
<option value="retail">Retail</option>
<option value="travel-transportation">Travel & Transportation</option>
<option value="telco-media">Telco / Media</option>
<option value="banking">Banking</option>
<option value="health-government">Health & Government</option>
<option value="energy-utilities">Energy & Utilities</option>
</select>
<p id='submitBtn'>Discover your AI iD</p>
<div style='clear:both'></div>
</div>
An alternative (but not recommended) is to search for the text itself inside the option:selected.
Like this:
if ($('#jobCategory option:selected').text == 'job category') {

Related

jquery validation alert for selected optiong value

I'm trying to validate combo box's like the below code, I get few alert messages even one condition is true. I needed to get only one alert even one condition is true and other should bordered in red. thank you
$(function() {
$('#issue-form input[type="submit"]').click(function() {
var TrackID = $('#issue_status_id').val();
var IssueCF = $('#issue_custom_field_values_55').val();
if (TrackID == '3' && IssueCF == '157') {
alert("Please select an option!");
$("#issue_custom_field_values_55").css("border", "2px solid red");
return false;
}
});
});
$(function() {
$('#issue-form input[type="submit"]').click(function() {
var TrackID = $('#issue_status_id').val();
var IssueCF = $('#issue_custom_field_values_52').val();
if (TrackID == '3' && IssueCF == '156') {
alert("Please select an option!");
$("#issue_custom_field_values_52").css("border", "2px solid red");
return false;
}
});
});
$(function() {
$('#issue-form input[type="submit"]').click(function() {
var TrackID = $('#issue_status_id').val();
var IssueCF = $('#issue_custom_field_values_56').val();
if (TrackID == '3' && IssueCF == '158') {
alert("Please select an option!");
$("#issue_custom_field_values_56").css("border", "2px solid red");
return false;
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="issue-form">
<div class="splitcontent">
<p>
<select name="issue[status_id]" id="issue_status_id">
<option value="1">New</option>
<option value="2">In Progress</option>
<option selected="selected" value="3">Solved</option>
<option value="4">Feedback</option>
<option value="5">End</option>
<option value="6">Rejected</option>
</select>
<p><label for="issue_custom_field_values_51"><span title="IssueType<" class="field-description">Issue Type</span></label>
<select name="issue[custom_field_values][51]" id="issue_custom_field_values_51" class="enumeration_cf">
<option value="">--- Please select ---</option>
<option selected="selected" value="55">Software Bug</option>
<option value="56">Enviromental Bug　</option>
<option value="58">Other Factors</option>
</select>
</p>
<p style="display: block;"><label for="issue_custom_field_values_52"><span title="OrginProcess" class="field-description">Orgin Process</span></label>
<select name="issue[custom_field_values][52]" id="issue_custom_field_values_52" class="enumeration_cf">
<option value=""> </option>
<option selected="selected" value="156">--- 未選択/not entered ---</option>
<option value="59">１Ａ．ＢＩ</option>
<option value="60">１Ｂ．ＢＤ</option>
<option value="61">１Ｃ．ＤＤ</option>
<option value="62">１Ｄ．ＰＤ</option>
<option value="63">１Ｅ．Ｃ</option>
</select>
</p>
<p style="display: block;"><label for="issue_custom_field_values_55"><span title="Reason" class="field-description">Reason of Leakage (Design)</span></label>
<select name="issue[custom_field_values][55]" id="issue_custom_field_values_55" class="enumeration_cf">
<option value=""> </option>
<option selected="selected" value="157">--- 未選択/not entered ---</option>
<option value="79">Poor Quality</option>
<option value="80">Not Reviewed</option>
<option value="81">Review Point Leak</option>
<option value="82">Review, Correction & Confirmation</option>
<option value="83">Lack of Communication</option>
<option value="84">Other</option>
<option value="85">Not Applicable</option>
</select>
</p>
<p style="display: block;"><label for="issue_custom_field_values_56"><span title="Test Process" class="field-description">Test Process that Extract Bug</span></label>
<select name="issue[custom_field_values][56]" id="issue_custom_field_values_56" class="enumeration_cf">
<option value=""> </option>
<option selected="selected" value="158">--- 未選択/not entered ---</option>
<option value="86">ＵＴ</option>
<option value="87">ＳＩ1</option>
<option value="88">ＳＩ2</option>
<option value="89">ＰＴ</option>
<option value="90">ＲＴ</option>
</select>
</p>
</div>
</form>
<input type="submit" name="commit" value="Create">
I needed to get the result like this with an alert message when first other values have been selected with an option. I needed an help from the following javascript code changes. thank you

Use below given code to remove border -
$(function () {
$('#issue-form input[type="submit"]').click(function () {
var TrackID = $('#issue_status_id').val();
var IssueCF = $('#issue_custom_field_values_55').val();
var isAlert = 0;
if (TrackID == '3' && IssueCF == '157') {
isAlert = 1;
$("#issue_custom_field_values_55").css("border", "2px solid red");
}
else{
$("#issue_custom_field_values_55").css("border", "none");
}
TrackID = $('#issue_status_id').val();
IssueCF = $('#issue_custom_field_values_52').val();
if (TrackID == '3' && IssueCF == '156') {
isAlert = 1;
$("#issue_custom_field_values_52").css("border", "2px solid red");
}
else{
$("#issue_custom_field_values_52").css("border", "none");
}
TrackID = $('#issue_status_id').val();
IssueCF = $('#issue_custom_field_values_56').val();
if (TrackID == '3' && IssueCF == '158') {
isAlert = 1;
$("#issue_custom_field_values_56").css("border", "2px solid red");
}else
{
$("#issue_custom_field_values_56").css("border", "none");
}
if (isAlert == "1") {
alert("Please select an option!");
return false;
}
});
});
<html>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="issue-form">
<div class="splitcontent">
<p>
<select name="issue[status_id]" id="issue_status_id">
<option value="1">New</option>
<option value="2">In Progress</option>
<option selected="selected" value="3">Solved</option>
<option value="4">Feedback</option>
<option value="5">End</option>
<option value="6">Rejected</option>
</select>
<p>
<label for="issue_custom_field_values_51"><span title="IssueType<" class="field-description">Issue Type</span></label>
<select name="issue[custom_field_values][51]" id="issue_custom_field_values_51" class="enumeration_cf">
<option value="">--- Please select ---</option>
<option selected="selected" value="55">Software Bug</option>
<option value="56">Enviromental Bug　</option>
<option value="58">Other Factors</option>
</select>
</p>
<p style="display: block;">
<label for="issue_custom_field_values_52"><span title="OrginProcess" class="field-description">Orgin Process</span></label>
<select name="issue[custom_field_values][52]" id="issue_custom_field_values_52" class="enumeration_cf">
<option value=""> </option>
<option selected="selected" value="156">--- 未選択/not entered ---</option>
<option value="59">１Ａ．ＢＩ</option>
<option value="60">１Ｂ．ＢＤ</option>
<option value="61">１Ｃ．ＤＤ</option>
<option value="62">１Ｄ．ＰＤ</option>
<option value="63">１Ｅ．Ｃ</option>
</select>
</p>
<p style="display: block;">
<label for="issue_custom_field_values_55"><span title="Reason" class="field-description">Reason of Leakage (Design)</span></label>
<select name="issue[custom_field_values][55]" id="issue_custom_field_values_55" class="enumeration_cf">
<option value=""> </option>
<option selected="selected" value="157">--- 未選択/not entered ---</option>
<option value="79">Poor Quality</option>
<option value="80">Not Reviewed</option>
<option value="81">Review Point Leak</option>
<option value="82">Review, Correction & Confirmation</option>
<option value="83">Lack of Communication</option>
<option value="84">Other</option>
<option value="85">Not Applicable</option>
</select>
</p>
<p style="display: block;">
<label for="issue_custom_field_values_56"><span title="Test Process" class="field-description">Test Process that Extract Bug</span></label>
<select name="issue[custom_field_values][56]" id="issue_custom_field_values_56" class="enumeration_cf">
<option value=""> </option>
<option selected="selected" value="158">--- 未選択/not entered ---</option>
<option value="86">ＵＴ</option>
<option value="87">ＳＩ1</option>
<option value="88">ＳＩ2</option>
<option value="89">ＰＴ</option>
<option value="90">ＲＴ</option>
</select>
</p>
</div>
<input type="submit" name="commit" value="Create">
</form>
</body>
</html>

I analysed your java-script and found that your logic require some changes as given below -
$(function () {
$('#issue-form input[type="submit"]').click(function () {
var TrackID = $('#issue_status_id').val();
var IssueCF = $('#issue_custom_field_values_55').val();
var isAlert = 0;
if (TrackID == '3' && IssueCF == '157') {
isAlert = 1;
$("#issue_custom_field_values_55").css("border", "2px solid red");
}
TrackID = $('#issue_status_id').val();
IssueCF = $('#issue_custom_field_values_52').val();
if (TrackID == '3' && IssueCF == '156') {
isAlert = 1;
$("#issue_custom_field_values_52").css("border", "2px solid red");
}
TrackID = $('#issue_status_id').val();
IssueCF = $('#issue_custom_field_values_56').val();
if (TrackID == '3' && IssueCF == '158') {
isAlert = 1;
$("#issue_custom_field_values_56").css("border", "2px solid red");
}
if (isAlert == "1") {
alert("Please select an option!");
return false;
}
});
});
<html>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="issue-form">
<div class="splitcontent">
<p>
<select name="issue[status_id]" id="issue_status_id">
<option value="1">New</option>
<option value="2">In Progress</option>
<option selected="selected" value="3">Solved</option>
<option value="4">Feedback</option>
<option value="5">End</option>
<option value="6">Rejected</option>
</select>
<p>
<label for="issue_custom_field_values_51"><span title="IssueType<" class="field-description">Issue Type</span></label>
<select name="issue[custom_field_values][51]" id="issue_custom_field_values_51" class="enumeration_cf">
<option value="">--- Please select ---</option>
<option selected="selected" value="55">Software Bug</option>
<option value="56">Enviromental Bug　</option>
<option value="58">Other Factors</option>
</select>
</p>
<p style="display: block;">
<label for="issue_custom_field_values_52"><span title="OrginProcess" class="field-description">Orgin Process</span></label>
<select name="issue[custom_field_values][52]" id="issue_custom_field_values_52" class="enumeration_cf">
<option value=""> </option>
<option selected="selected" value="156">--- 未選択/not entered ---</option>
<option value="59">１Ａ．ＢＩ</option>
<option value="60">１Ｂ．ＢＤ</option>
<option value="61">１Ｃ．ＤＤ</option>
<option value="62">１Ｄ．ＰＤ</option>
<option value="63">１Ｅ．Ｃ</option>
</select>
</p>
<p style="display: block;">
<label for="issue_custom_field_values_55"><span title="Reason" class="field-description">Reason of Leakage (Design)</span></label>
<select name="issue[custom_field_values][55]" id="issue_custom_field_values_55" class="enumeration_cf">
<option value=""> </option>
<option selected="selected" value="157">--- 未選択/not entered ---</option>
<option value="79">Poor Quality</option>
<option value="80">Not Reviewed</option>
<option value="81">Review Point Leak</option>
<option value="82">Review, Correction & Confirmation</option>
<option value="83">Lack of Communication</option>
<option value="84">Other</option>
<option value="85">Not Applicable</option>
</select>
</p>
<p style="display: block;">
<label for="issue_custom_field_values_56"><span title="Test Process" class="field-description">Test Process that Extract Bug</span></label>
<select name="issue[custom_field_values][56]" id="issue_custom_field_values_56" class="enumeration_cf">
<option value=""> </option>
<option selected="selected" value="158">--- 未選択/not entered ---</option>
<option value="86">ＵＴ</option>
<option value="87">ＳＩ1</option>
<option value="88">ＳＩ2</option>
<option value="89">ＰＴ</option>
<option value="90">ＲＴ</option>
</select>
</p>
</div>
<input type="submit" name="commit" value="Create">
</form>
</body>
</html>

Use below given code in this case. Please like my profile if it works for you.
<script type="text/javascript">
$(function () {
$('#issue-form input[type="submit"]').click(function () {
var TrackID = $('#issue_status_id').val();
var IssueCF = $('#issue_custom_field_values_55').val();
var isAlert = 0;
if (TrackID == '3' && IssueCF == '157') {
isAlert = 1;
$("#issue_custom_field_values_55").css("border", "2px solid red");
} else {
$("#issue_custom_field_values_55").css("border", "none");
}
TrackID = $('#issue_status_id').val();
IssueCF = $('#issue_custom_field_values_52').val();
if (TrackID == '3' && IssueCF == '156') {
isAlert = 1;
$("#issue_custom_field_values_52").css("border", "2px solid red");
} else {
$("#issue_custom_field_values_52").css("border", "none");
}
TrackID = $('#issue_status_id').val();
IssueCF = $('#issue_custom_field_values_56').val();
if (TrackID == '3' && IssueCF == '158') {
isAlert = 1;
$("#issue_custom_field_values_56").css("border", "2px solid red");
} else {
$("#issue_custom_field_values_56").css("border", "none");
}
if (isAlert == "1") {
alert("Please select an option!");
return false;
}
});
});
</script>

show hide div based on select option value jQuery

I have a select list with value 0,1,2,3,4,5,6,7 .On select with value 0 and 1 I want to show a div, but on select with value 2,3,4,5,6,7 I want to hide that div.The code I have right now is below
HTML
<select class="rel_status">
<option value="0">---</option>
<option value="1">Single</option>
<option value="2">In a relationship</option>
<option value="3">Engaged</option>
<option value="4">Married</option>
<option value="5">Separated</option>
<option value="6">Divorced</option>
<option value="7">Widowed</option>
</select>
<div class="rel_part">
<input type="text" name="part_name" placeholder="Search">
</div>
jQuery
//hide partner search form
$('.rel_part').hide();
//Search Relationship partner
$(document).ready(function(){
$('.rel_status').change(function(){
if($('.rel_status').val() == '2','3','4','5','6','7') {
$('.rel_part').show();
} else {
$('.rel_part').hide();
}
});
});
The code actually works when I put
.val() == '2')
instead of
.val() == '2','3','4','5','6','7')
But then I cant show the div for other values

You can do it like this if ($.inArray($(this).val(), "2,3,4,5,6,7") == -1) {
Demo
//hide partner search form
$('.rel_part').hide();
//Search Relationship partner
$(document).ready(function() {
$('.rel_status').change(function() {
if ($.inArray($(this).val(), "2,3,4,5,6,7") == -1) {
$('.rel_part').show();
} else {
$('.rel_part').hide();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="rel_status">
<option value="0">---</option>
<option value="1">Single</option>
<option value="2">In a relationship</option>
<option value="3">Engaged</option>
<option value="4">Married</option>
<option value="5">Separated</option>
<option value="6">Divorced</option>
<option value="7">Widowed</option>
</select>
<div class="rel_part">
<input type="text" name="part_name" placeholder="Search">
</div>

use this it will works
$('.rel_status').change(function(){
if($('.rel_status').val() < 2) {
$('.rel_part').show();
} else {
$('.rel_part').hide();
}
});
//hide partner search form
$('.rel_part').hide();
//Search Relationship partner
$(document).ready(function(){
$('.rel_status').change(function(){
if($('.rel_status').val() < 2) {
$('.rel_part').show();
} else {
$('.rel_part').hide();
}
});
});
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<select class="rel_status">
<option value="0">---</option>
<option value="1">Single</option>
<option value="2">In a relationship</option>
<option value="3">Engaged</option>
<option value="4">Married</option>
<option value="5">Separated</option>
<option value="6">Divorced</option>
<option value="7">Widowed</option>
</select>
<div class="rel_part">
<input type="text" name="part_name" placeholder="Search">
</div>

That's not a valid way of comparing one value to many others.
if($('.rel_status').val() == '2','3','4','5','6','7')
Use a logic OR Operator instead:
if($('.rel_status').val() == '0' || $('.rel_status').val() = '1') {
$('.rel_part').hide();
} else {
$('.rel_part').show();
}
Notice, that I switched the cases in the if clause so it's less code to write.

The problem is this is not a valid way to use , in Javascript, because you will end up validating if($('.rel_status').val() == '7') { instead.
You can change the code into this
if($.inArray($('.rel_status').val(), ['2','3','4','5','6','7']) != -1) {
and it should work.
Hope it helps!

jQuery How To Add Form Validation Using 5-step Sliding Form

I'm a newbie and find very difficult to read and understand complex javascript from other's work.
I would like to ask some help in making a simplified jquery for me to use rather than using the complex code which I don't really understand.
First: this is a 5 step form consist of gender, first name, dob, email and password. There are validations in every steps.
See the complex code:
<script>
$(document).ready(function () {
var Fist = {
config: {
stepsSelector: $(".steps"),
nextSelector: $(".myButton"),
errorSelector: $(".error"),
indSelector: $(".steps-ind"),
form: "",
cur_step: 1,
max_step: 1,
offset: 278,
errorString: "This field is required",
clickEvent: "touchstart"
},
run: function(e) {
this.config.form = e;
var t = this;
var n = $(".regform").width();
t.config.offset = n;
if (typeof document.body.ontouchstart === "undefined") {
t.config.clickEvent = "click"
}
t.config.indSelector.find(".step-ind" + t.config.cur_step).addClass("step-ind-active");
t.config.nextSelector.on(t.config.clickEvent, function() {
t.process()
});
t.config.form.find("input").on("keypress", function(e) {
var n = e.keyCode ? e.keyCode : e.which;
if (n === 13) {
t.process()
}
});
t.config.indSelector.find("div").on(t.config.clickEvent, function() {
t.gotoStep($(this))
})
},
indicateStep: function(e) {
var t = this;
t.config.indSelector.find("div").removeClass("step-ind-active");
t.config.indSelector.find(".step-ind" + e).addClass("step-ind-active");
setTimeout(function() { $('.step'+e+' input, .step'+e+' select').focus() }, 500);
},
animateStep: function(e) {
var t = this;
t.config.stepsSelector.css({
transform: "translateX(-" + (e - 1) * t.config.offset + "px)"
}, function() {
t.config.form.find(".step" + e).find("input").focus()
})
},
process: function() {
var e = this;
var t = e.config.form.find(".step" + e.config.cur_step).find("input,select");
var n = false;
t.each(function() {
if (!e.validate($(this))) {
n = true
}
});
if (!n) {
e.config.cur_step++;
if (e.config.cur_step === 6) {
e.config.form.submit()
} else {
e.config.max_step = e.config.cur_step;
e.animateStep(e.config.cur_step);
e.indicateStep(e.config.cur_step);
if (e.config.cur_step === 5) {
e.config.nextSelector.val("Submit")
}
}
}
},
gotoStep: function(e) {
var t = e.text();
var n = this;
if (t < n.config.max_step) {
n.animateStep(t);
n.indicateStep(t);
n.config.cur_step = t;
if (t === 5) {
n.config.nextSelector.val("Submit")
} else {
n.config.nextSelector.val("Next")
}
} else {
n.process()
}
},
validate: function(e) {
var t = this;
t.config.errorSelector.hide();
e.removeClass("error-item");
var n = false;
if ($.trim(e.val()) === "") {
n = true;
t.config.errorString = "This field is required"
}
if (e.attr("name") === "email" && !t.validateEmail(e.val())) {
n = true;
t.config.errorString = "Invalid email address"
}
if (e.attr("name") === "firstname" && !t.validateName(e.val())) {
n = true;
t.config.errorString = "Invalid name"
}
if (n) {
t.config.errorSelector.empty().append(t.config.errorString).fadeIn("fast");
e.addClass("error-item");
return false
}
return true
},
validateEmail: function(e) {
var t = /^(([^<>()[\]\\.,;:\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,}))$/;
return t.test(e)
},
validateInt: function(e) {
var t = /^\d{1,}$/;
return t.test(e)
},
validateName: function(e) {
var t = /^\w+(\s)?\w+(\s)?(\w+)?$/;
return t.test(e)
}
}
Fist.run($("#regform"));
});
Here is my HTML:
<div class="regform">
<div class="form-wrapper">
<form id="regform" method="post" action="http://www.test.com/signup">
<div class="steps step1">
<label>Your Gender?</label>
<div name="gender">
<div class="man-btn color" value="1">
<span>Man</span>
<div class="man" >
<i class="fa fa-male" aria-hidden="true"></i>
</div>
</div>
<div class="woman-btn" value="2">
<span>Woman</span>
<div class="woman">
<i class="fa fa-female" aria-hidden="true"></i>
</div>
</div>
</div>
</div>
<div class="steps step2">
<label>First Name:</label>
<input type="text" name="firstname">
</div>
<div class="steps step3">
<label>What is Your Date of Birth?</label>
<select name="dobday" id="dobday" class="required">
<option value="">Day</option>
<option value="1">01</option>
<option value="2">02</option>
<option value="3">03</option>
<option value="4">04</option>
<option value="5">05</option>
<option value="6">06</option>
<option value="7">07</option>
<option value="8">08</option>
<option value="9">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
<select name="dobmonth" id="dobmonth" class="required">
<option value="">Month</option>
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8">August</option>
<option value="9">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
<select name="dobyear" id="dobyear" class="required">
<option value="">Year</option>
<?php for($x=date("Y") - 18; $x >= 1918; $x--): ?>
<option value="<?php echo $x; ?>"><?php echo $x; ?></option>
<?php endfor; ?>
</select>
</div>
<div class="steps step4">
<label>Email:</label>
<input type="email" pattern="[^ #]*#[^ #]*" name="email">
</div>
<div class="steps step5">
<label>Password:</label>
<input type="password" name="password">
</div>
<div class="error">This field is required</div>
</form>
</div>
<div class="submit">
<input type="button" class="myButton" value="Next">
</div>
<div class="steps-ind">
<div class="step-ind1">1</div>
<div class="step-ind2">2</div>
<div class="step-ind3">3</div>
<div class="step-ind4">4</div>
<div class="step-ind5">5</div>
</div>
Please help me. Thank you so much for your help!

It's simple enough to add a new button! You could either change the gender to a select dropdown or you could add a new div like this:
<div class="bro-btn" value="3">
<span>Bro</span>
<div class="bro">
<i class="fa fa-bro" aria-hidden="true"></i>
</div>
</div>
Few things you have to note: The fa fa-bro is a reference to a class in your CSS that adds an icon corresponding to whatever gender is selected. If you were to add new buttons like above, you would have to find an icon that matches from Font Awesome.

html get Method sending wrong url

on using html get method my url should be shown as
http://10.1.18.155/log_table_view.php?year=2017&frommonth=3&fromdate=3&tomonth=3&todate=3&query=ip&filter=like&search_text=10.1.17.20&subquery=&subfilter=&sub_search_text=
but it shows as
http://10.1.18.155/log_table_view.php?year=2017&frommonth=3&fromdate=3&tomonth=3&todate=3&query=ip&filter=like&search_text+=10.1.17.20&subquery=&subfilter=&sub_search_text=
there is a plus sign between query=ip&filter=like&search_text+=10.1.17.20
which creates problem in getting data
my html form code is like
<form method="get" action="log_table_view.php" onsubmit="return submit_query_form_check();" enctype="multipart/form-data">
<label>Log for Year</label>
<select id="year" name="year">
<option value="">Select Year</option>
<option value="2017">2017</option>
<option value="2016">2016</option>
</select>
<br>
<label>From</label>
<select id="frommonth" name="frommonth">
<option value="">Select Month</option>
</select>
<select id="fromdate" name="fromdate">
<option value="">Select Date</option>
</select>
<label>To</label>
<select id="tomonth" name="tomonth">
<option value="">Select Month</option>
</select>
<select id="todate" name="todate">
<option value="">Select Date</option>
</select>
<br>
<label>Query</label>
<select name="query" id="query">
<option value="">Select</option>
<option value="time">Time</option>
<option value="ip">Server IP</option>
<option value="username">Username</option>
<option value="nasip">Nas IP</option>
<option value="groupname">Group name</option>
<option value="cmd">CMD</option>
<option value="callerid">Caller ID</option>
<option value="realname">Real Name</option>
<option value="network_device_group">Network Device Group</option>
</select>
<select name="filter" id="filter">
<option value="">filter</option>
<option value="like">%</option>
<option value="equal">=</option>
</select>
<input type="text" placeholder="Search Text" name="search_text" id="search_text">
<label>AND</label>
<label>Sub-Query</label>
<select name="subquery" id="subquery">
<option value="">Select</option>
<option value="time">Time</option>
<option value="ip">Server IP</option>
<option value="username">Username</option>
<option value="nasip">Nas IP</option>
<option value="groupname">Group name</option>
<option value="cmd">CMD</option>
<option value="callerid">Caller ID</option>
<option value="realname">Real Name</option>
<option value="network_device_group">Network Device Group</option>
</select>
<select name="subfilter" id="subfilter">
<option value="">filter</option>
<option value="like">%</option>
<option value="equal">=</option>
</select>
<input type="text" placeholder="Search Text" name="sub_search_text" id="sub_search_text">
<button type="submit" class="search">Search</button>
</form>
function submit_query_form_check() {
var year = $("#year").val();
var frommonth = $('#frommonth').val();
var fromdate = $('#fromdate').val();
var tomonth = $('#tomonth').val();
var todate = $('#todate').val();
var query = $('#query').val();
var subquery = $('#subquery').val();
if (year == "") {
alert("Year Not Selected");
$("#year").focus();
return false;
}
if (frommonth == "") {
alert("From Month Not Selected");
$("#frommonth").focus();
return false;
}
if (fromdate == "") {
alert("From date Not Selected");
$("#fromdate").focus();
return false;
}
if (tomonth == "") {
alert("To Month Not Selected");
$("#tomonth").focus();
return false;
}
if (todate == "") {
alert("To date Not Selected");
$("#todate").focus();
return false;
}
if (query != "") {
var filter = $('#filter').val();
var search_text = $('#search_text').val();
if (filter == "") {
alert("You have not selected any filter for query");
$('#filter').focus();
return false;
} else if (search_text == "") {
alert("You have not input any search text for query");
$('#search_text').focus();
return false;
} else if (query == "groupname") {
if (filter != "like") {
alert("With Group Name Query You Can Only Use Like Filter");
$('#filter').focus();
return false;
}
}
}
if (subquery != "") {
var subfilter = $('#subfilter').val();
var sub_search_text = $('#sub_search_text').val();
if (query == "") {
alert("You have not selected any for query before using sub query");
$('#query').focus();
return false;
}
if (subfilter == "") {
alert("You have not selected any sub filter for query");
$('#subfilter').focus();
return false;
} else if (search_text == "") {
alert("You have not input any sub search text for query");
$('#sub_search_text').focus();
return false;
} else if (subquery == "groupname") {
if (subfilter != "like") {
alert("With Group Name Query You Can Only Use Like Filter");
$('#subfilter').focus();
return false;
}
}
}
return true;
}

Right before you actually pass in the string to be called to the endpoint, just strip the '+' out of the URL using the str_replace method.
<?
$badUrl = "http://10.1.18.155/log_table_view.php?year=2017&frommonth=3&fromdate=3&tomonth=3&todate=3&query=ip&filter=like&search_text+=10.1.17.20&subquery=&subfilter=&sub_search_text=";
$goodUrl = str_replace('?/', '?', $badUrl);
then you simply pass the goodUrl to make the GET request

Nested Hide, show javascript not working

I have html code like this,
<select id="select1">
<option value="1">..<option>
..
</select>
<div id="select2" style="display:none;"></div>
<div id="select3" style="display:none;"></div>
If one option is selected, it displays corresponding div. Code I used is
$("#select1").change(function() {
if($(this).val() == 1) {
$("#select2").show();
} else {
$("#select2").hide();
}
if($(this).val() == 2) {
$("#select3").show();
} else {
$("#select3").hide();
}
if($(this).val() == 3) {
$("#select4").show();
} else {
$("#select4").hide();
}
});
If one div is displayed, I again used the same script for another select which shows/hides a textarea.
<div id="select2">
<select id="select4"></select>
<textarea id="select5" style="display:none;"></textarea>
<script>
$("#select4").change(function() {
if($(this).val() == 1) {
$("#select5").show();
} else {
$("#select5").hide();
}
});
</script>
But that textarea is not displaying.

Well, the HTML you show has no option elements in the select, so the select will have no value.
If the HTML is actually different, you should edit your question.

try this, hope it does what you are expecting :
$("#select1").change(function() {
if ($(this).val() == 1) {
$("#select2").show();
} else {
$("#select2").hide();
}
if ($(this).val() == 2) {
$("#select3").show();
} else {
$("#select3").hide();
}
});
$("#select4").change(function() {
if ($(this).val() == 1) {
$("#select5").show();
} else {
$("#select5").hide();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="select1">
<option value="1">1
</option>
<option value="2">2
</option>
<option value="3">3
</option>
</select>
<div id="select3" style="display:none;">div2</div>
<div id="select2" style="display:none;">
<select id="select4">
<option value="1">1
</option>
<option value="2">2
</option>
</select>
<textarea id="select5" style="display:none;"></textarea>
</div>

Categories