Hi guys is it ok to ask for some jquery help here?..
I have got the validations workin fine and that they display on the textbox if the respective fields are empty, however, I am having problems with setting up validations for the drop down boxes. Since, I have limited knowledge on jquery, i searched google for help on dropdown validations but had no joy what so ever.
I am really in a rush and actually don't have time to do some more testing as I have still got to complete three pages before 'Thusday', if you guys could help me out to validate dropdown fields would be a life saver, I know i should work this out myself but I am in urgent need.
Also alongside dropdown's as displayed in the screen shot below, I don't get the 'os' and 'edate' fields to validate for some reason and thanks for the time I really appriciate it 🙂.
Here's the form code:
<div id="OpenTicketForm">
<form action="useraddticket.php" id="validationforms" name="validationforms" method="get">
<p>Please complete the form below:</p>
<fieldset class="newticket">
<b><legend>Ticket Details: </legend><br>
<div> <label for="name">Full Name: </label> <span style="color:#0b77b7"><?php echo $row['f_name']." ".$row['l_name'] ?> <input type="hidden" name="name" value="<?php echo $row['f_name']." ".$row['l_name'] ?>" /></span> </div>
<div> <label for="email">E-mail ID: </label> <span style="color:#0b77b7"><?php echo $row['email'] ?> <input type="hidden" name="email" value="<?php echo $row['email'] ?>" /></span></div>
<div> <label for="priority" id="priority">Set Priority: </label>
<SELECT NAME="priority">
<OPTION VALUE="">Select Priority</option>
<OPTION VALUE="LOW" >Low</option>
<OPTION VALUE="MEDIUM" >Medium</option>
<OPTION VALUE="HIGH" >High</option>
</SELECT></div>
<div> <label for="dept" id="dept">Assign Dept: </label>
<SELECT NAME="helpdep">
<OPTION VALUE=""><b>Select Department</b></option>
<OPTION VALUE="1" >IT Support</option>
<OPTION VALUE="2" >Network</option>
<OPTION VALUE="3" >Electrical</option>
</SELECT></div>
<div> <label for="os">System (O/S): </label> <input type='text' id="os" name='os' value=" "></div>
<div> <label for="cdate"></label> <input type='hidden' name='cdate' value="<?php echo(date("Y-m-d")) ?>"></div>
<div> <label for="edate">Due Date: </label> <input type='text' name="edate" id='edate' value=" " > <input type=button value='Select Due Date' onclick="displayDatePicker('edate', false, 'ymd', '-');"></div>
<div> <label for="sub">Subject: </label> <input type='text' name='sub' id="sub" value=""></div>
<div> <label for="messagebox">Message: </label> <textarea name="messagebox" rows="7" id="messagebox" cols="38" value=" " ></textarea></div>
</fieldset><br>
<input class='button' align='right' type='submit' value='Open a New Ticket'/>
<input class='button' align='right' type='reset' value='Reset Form'/>
<input class='button' align='right' type='button' value='Cancel Form' onclick='window.location.href="usertickethome.php"'/>
</form>
Jquery code:
$(document).ready(function(){
// Place ID's of all required fields here.
required = ["firstname", "lastname", "age", "Country", "email", "password", "ticket", "emailid", "name", "sub", "comment", "os", "edate", "messagebox", "priority", "dept"];
// If using an ID other than #email or #error then replace it here
email = $("#email");
emailid = $("#emailid");
errornotice = $("#error");
// The text to show up within a field when it is incorrect
emptyerror = "Please fill field!";
emailerror = "Invalid e-mail!";
$("#validationforms").submit(function(){
//Validate required fields
for (i=0;i<required.length;i++) {
var input = $('#'+required[i]);
if ((input.val() == "") || (input.val() == emptyerror)) {
input.addClass("needsfilled");
input.val(emptyerror);
errornotice.fadeIn(750);
} else {
input.removeClass("needsfilled");
}
}
// Validate the e-mail.
if (!/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/.test(email.val())) {
email.addClass("needsfilled");
email.val(emailerror);
}
//if any inputs on the page have the class 'needsfilled' the form will not submit
if ($(":input").hasClass("needsfilled")) {
return false;
} else {
errornotice.hide();
return true;
}
});
// Clears any fields in the form when the user clicks on them
$(":input").focus(function(){
if ($(this).hasClass("needsfilled") ) {
$(this).val("");
$(this).removeClass("needsfilled");
}
});
});
Thanks guys, really appriciate it 🙂
here's an attached ss of the validations and form:
