I'm working on a simple form validation script, that just checks fields aren't empty to begin with (further advanced validation will be added later).
However, on submission, the form seems to continue to submit, even though I am using preventDefault(). Could someone check my syntax and my logic for me please, figure out what's going wrong? I get a flash of the validation before the form submits as normal.
Fiddle: http://jsfiddle.net/qb9KS/1/
HTML
<form id="userForm" method="POST" action="form-process.php">
<div>
<fieldset>
<legend>User Information</legend>
<div id="errorDiv"></div>
<label for="name">Name:*</label>
<input type="text" id="name" name="name" />
<span class="errorFeedback errorSpan" id="nameError">Name is required</span>
<br />
<label for="city">City:</label>
<input type="text" id="city" name="city" />
<br />
<label for="state">State:</label>
<select id="state" name="state">
<option></option>
<option>Alabama</option>
<option>California</option>
<option>Colorado</option>
<option>Florida</option>
<option>Illinois</option>
<option>New Jersey</option>
<option>New York</option>
<option>Wisconsin</option>
</select>
<br />
<label for="zip">ZIP:</label>
<input type="text" id="zip" name="zip" />
<br />
<label foe="email">Email Address:*</label>
<input type="text" id="email" name="email" />
<span class="errorFeedback errorSpan" id="emailError">Email is required</span>
<br />
<label for="phone">Telephone Number:</label>
<input type="text" id="phone" name="phone" />
<span class="errorFeedback errorSpan" id="phoneError">Format: xxx-xxx-xxxx</span>
<br />
<label for="work">Number Type:</label>
<input class="radioButton" type="radio" name="phoneType" id="work" value="work" />
<label class="radioButton" for="work">Work</label>
<input class="radioButton" type="radio" name="phoneType" id="home" value="home" />
<label class="radioButton" for="home">Home</label>
<span class="errorFeedback errorSpan" id="phonetypeError">Please choose an option</span>
<br />
<label for="password1">Password:*</label>
<input type="password" id="password1" name="password1" />
<span class="errorFeedback errorSpan" id="password1Error">Password required</span>
<br />
<label for="password2">Verify Password:*</label>
<input type="password" id="password2" name="password2" />
<span class="errorFeedback errorSpan" id="password2Error">Passwords don't match</span>
<br />
<input type="submit" id="submit" name="submit">
</fieldset>
</div>
</form>
Javascript
$(document).ready(function() {
$("#userForm").submit(function(e) {
removeFeedback();
var errors = validateForm();
if (errors == "") {
return true;
}
else {
provideFeedback(errors);
e.preventDefault();
return false;
}
});
function validateForm() {
var errorFields = new Array();
if ($('#name').val() == "") {
errorFields.push('name');
}
if ($('#email').val() == "") {
errorFields.push('email');
}
if ($('#password1').val() == "") {
errorFields.push('password1');
}
return errorFields;
}
function provideFeedback(incomingErrors) {
for (var i = 0; i < incomingErrors.length; i++) {
$("#" + incomingErrors[i]).addClass("errorClass");
$("#" + incomingErrors[i] + "Error").removeclass("errorFeedback");
}
$("#errorDiv").html("Errors encountered");
}
function removeFeedback() {
$("#errorDiv").html("");
$('input').each(function() {
$(this).removeClass("errorClass");
});
$('.errorSpan').each(function() {
$(this).addClass("errorFeedback");
});
}
});
It should be...
$("#" + incomingErrors[i] + "Error").removeClass("errorFeedback");
... instead. As jQuery object doesn't have removeclass method (and case does matter in JS), this function fails with an error, and neither e.preventDefault() nor return false lines are invoked.
The bottom line: always check JS console for errors, it'll save you A LOT of time and nerves. )
Try checking the array.length instead of =
$(document).ready(function() {
$("#userForm").submit(function(e) {
if (errors.length >0) {
return true;
}
}
}
you also typo error in removeClass
$("#" + incomingErrors[i] + "Error").removeClass("errorFeedback");
Related
I am trying to match two fields with the result in my javascript before the form gets submitted but not working.
I don't want the form to get submitted if the results don't match.
Please what is the solution? Thanks.
Code Below;
function Check(){
var done=0;
var check=document.check.phone.value;
var check=document.check.pcode.value;
if (phone=="08023" && pcode=="12345") {
alert ("Result Match!");
done=1;
return fasle;
}
if (done==0) {
alert("Result Don't Match!");
}
}
<form action=" " method="post">
<input name="phone" maxlength="11" type='tel' id="phone" placeholder="0000-000-0000" required="" />
<br/><br/>
<input name="pcode" maxlength="11" type='tel' id="pcode" placeholder="0000-000-0000" required="" />
<br/><br/>
<button class="button" onClick="javascript:Check()" name="Submit" type="submit" value="Login"><span>Log In </span></button>
</form>
You have several mistakes in your code, I have cleaned it up a bit for you.
function Check() {
var done = 0;
var phone = document.check.phone.value;
var pcode = document.check.pcode.value;
if (phone=="08023" && pcode=="12345") {
alert("Result Match!");
done = 1;
} else {
alert("Result Don't Match!");
}
}
<form name="check" action=" " method="post">
<input name="phone" maxlength="11" type='tel' id="phone" placeholder="0000-000-0000" required="" />
<br /><br />
<input name="pcode" maxlength="11" type='tel' id="pcode" placeholder="0000-000-0000" required="" />
<br /><br />
<button class="button" onClick="javascript:Check()" name="Submit" type="submit" value="Login">
<span>LogIn</span></button>
</form>
I have a simple form where I am using a vanilla JS library (https://pristine.js.org/) for form validation. The form validation is successful (mostly) but then the form doesn't submit. For the life of me I can't figure out what's going wrong.The form is supposed to post to a PHP file where I can get the posted variable values.
My HTML page with the form and necessary JS and CSS are in the jsfiddle here. In case JSFiddle is acting up, the actual code's below.
I'd appreciate it if someone can help me out with this.
Thanks a ton!
Dexxterr
P.S.: I've beginner level knowledge about JS.
My HTML Code:
<div style="width: 50%; margin: auto;">
<form class="fv-stacked-form" id="inquiry" method="POST" action="form.php">
<div class="fv-row form-group">
<label>Which industry does your organization belong to?</label>
<div>
<input class="form-control" type="checkbox" name="industry[]" value="Manufacturing" id="indManufacturing" min="1" required data-pristine-min-message="Select at least 1" />
<label class="label-inline" for="indManufacturing">Manufacturing</label>
</div>
<div>
<input class="form-control" type="checkbox" name="industry[]" value="Education" id="indEducation" min="1" required data-pristine-min-message="Select at least 1" />
<label class="label-inline" for="indEducation">Education</label>
</div>
<div>
<input class="form-control" type="checkbox" name="industry[]" value="Real Estate" id="indRealestate" min="1" required data-pristine-min-message="Select at least 1" />
<label class="label-inline" for="indRealestate">Real Estate</label>
</div>
<div>
<input class="form-control" type="checkbox" name="industry[]" value="" id="indOther" min="1" required data-pristine-min-message="Select at least 1" />
<label class="label-inline" for="indOther">Other</label>
<input style="display: none;" class="label-inline" type="text" name="indOtherValue" id="indOtherValue" value="" minlength="3" class="form-control" data-pristine-min-message="Please enter your industry" />
</div>
</div>
<div class="fv-row form-group">
<label>What is your budget? (In USD)</label>
<input class="form-control" type="number" min="100" required name="budget" data-pristine-min-message="Enter at least 100" />
</div>
<div class="fv-row form-group">
<label>How soon do you want to get started??</label>
<div>
<input class="form-control" type="radio" name="timeline[]" value="Immediately" id="immediately" required />
<label class="label-inline" for="immediately">Immediately</label>
</div>
<div>
<input class="form-control" type="radio" name="timeline[]" value="3Months" id="3months" required />
<label class="label-inline" for="3months">In the next 3 months</label>
</div>
<div>
<input class="form-control" type="radio" name="timeline[]" value="6Months" id="6months" required />
<label class="label-inline" for="6months">In the next 6 months</label>
</div>
<div>
<input class="form-control" type="radio" name="timeline[]" value="NoIdea" id="noidea" required />
<label class="label-inline" for="noidea">I don't have a timeline yet</label>
</div>
</div>
<div class="fv-row form-group">
<label>First Name</label>
<input class="form-control" type="text" name="fname" required />
</div>
<div class="fv-row form-group">
<label>Last Name</label>
<input class="form-control" type="text" name="lname" required />
</div>
<div class="fv-row form-group">
<label>Company Email</label>
<input class="form-control" type="email" name="email" required />
</div>
<div class="fv-row form-group">
<label>No. of Employees</label>
<select class="form-control" id="ageRangeField" required>
<option value=""></option>
<option value="1-100">1-100</option>
<option value="100-500">100-500</option>
<option value="500-2500">500-2500</option>
<option value="2500+">2500+</option>
</select>
</div>
<div class="fv-row form-group">
<input name="formsubmit" id="formsubmit" type="submit" class="" value="Submit" />
</div>
</form>
<p id="confmsg" style="display: none;">Thank you for submitting the form.</p>
</div>
My JS Code:
window.onload = function ()
{
var form = document.getElementById("inquiry");
var pristine = new Pristine(form);
form.addEventListener('submit', function (e)
{
e.preventDefault();
var valid = pristine.validate();
// alert('Form is valid: ' + valid);
if(valid === true)
{
// alert("This works");
return true;
}
else
{
// alert("This doesn't work");
}
});
};
var sb = document.getElementById('formsubmit'); // Submit button
var cbother = document.getElementById('indOther'); // Checkbox
var txtother = document.getElementById('indOtherValue'); // Other Textbox
cbother.addEventListener('click',function(e){
if(cbother.checked){
cbother.value=txtother.value;
txtother.style.display = 'block';
}else{
txtother.value='';
txtother.style.display = 'none';
}
},false);
e.preventDefault();
is preventing the form from being submitted. If you simply remove it the form will be submitted even if the pristine check fails. So what you want to do is only prevent the default behaviour (which is the form to be submitted) if the pristine check fails:
form.addEventListener('submit', function (e)
{
var valid = pristine.validate();
// alert('Form is valid: ' + valid);
if(valid === true)
{
// alert("This works");
return true;
}
else
{
e.preventDefault();
// alert("This doesn't work");
}
});
to simplify that a little you could simply write:
form.addEventListener('submit', function (e)
{
//if the pristine check fails, prevent the form from being submitted
if(!pristine.validate()){
e.preventDefault();
}
});
folks.
I hope you don't see this as a silly question because i am new to JavaScript. I did my research on how to solve this problem but the answers i found on stack overflow were kind of too high for me right now. And i don't like to copy codes either. I want to learn it. My JavaScript code worked on one field but didn't work for all fields even when i did a loop.
Please you are free to show me how to do this professionally. I would be grateful to see many approaches or methods. Gracias
function Validate(x){
var required = document.getElementsByClassName("required");
for(var x = 0; x > required.length; x++){
if ((required[x].value == "") || (required[x].value == null)) {
required[x].style.backgroundColor = "red";
required[x].style.color = "white";
} else {
required[x].style.backgroundColor = "";
required[x].style.color = "#777";
}
}
}
<form id="form1" name="form1" method="post" action="">
<p>
<label for="textfield">Name</label><br />
<input type="text" name="name" id="name" class="forme required" onblur="Validate(name)" />
<br />
<label for="textfield">Surname</label><br />
<input type="text" name="surname" id="surname" class="forme required" />
<br />
<label for="textfield"> School</label><br />
<input type="text" name="school" id="school" class="forme required" />
<br />
<label for="textfield">Mobile</label><br />
<input type="text" name="mobile" id="mobile" class="forme required" />
<br />
<label for="email"> Email</label><br />
<input type="text" name="email" id="email" class="forme required"/>
</p>
<p>
<input type="reset" name="reset" id="reset" value="Reset" />
<input type="submit" onclick="Validate()" name="submit" id="submit" value="Submit" />
</p>
</form>
Be grateful for ya time.
as mentioned in the comments of your question, you used the wrong sign (">" ist false, "<" is true). But your code has some more failures.
The for attribute on the label elements should always point to the respective input field, so use the ID of the input field.
It's may better to use the JavaScript addEventListener method instead of the DHTML attribute onclick, but that is probably a matter of taste.
document.getElementById("submit").addEventListener("click", function(event){
var req = document.querySelectorAll("form input.required"),
error = false;
for(var i = 0; i < req.length; i++){
if(req[i].value.trim() == ""){
if(!error){
error = true;
}
req[i].style.setProperty("color", "#ffffff");
req[i].style.setProperty("background-color", "#ff0000");
} else {
req[i].style.removeProperty("color");
req[i].style.removeProperty("background-color");
}
}
if(error){
// Prevent Form Submit
event.preventDefault();
}
});
<form id="form1" name="form1" method="post" action="">
<p>
<label for="name">Name</label><br />
<input type="text" id="name" name="name" class="forme required" />
</p>
<p>
<label for="surname">Surame</label><br />
<input type="text" id="surname" name="surname" class="forme required" />
</p>
<p>
<label for="school"> School</label><br />
<input type="text" id="school" name="school" class="forme required" />
</p>
<p>
<label for="mobile">Mobile</label><br />
<input type="tel" id="mobile" name="mobile" class="forme required" />
</p>
<p>
<label for="email"> Email</label><br />
<input type="email" id="email" name="email" class="forme required" />
</p>
<p>
<input type="reset" id="reset" name="reset" value="Reset" />
<input type="submit" id="submit" name="submit" value="Submit" />
</p>
</form>
Please note: Don't use ONLY JavaScript to validate your form fields. You should always check the passed user informations on the server side too, because you can't control the user.
Have fun learning JavaScript.
Sincerely,
Sam.
I for some reason can not get the rep id field to validate with my script. I've spent hours on it and can't figure it out. All other fields validate just fine except the repid.
Here is the code I am using for the form
<form action="<?php echo $editFormAction; ?>" method="POST" enctype="multipart/form-data" name="repsignup" id="repsignup">
<h1>Janoo Rep Sign Up</h1>
<p>Join our growing team and help rep Janoo out there in the world!</p>
<p> </p>
<h4>
Name (First and Last):
<input name="name" type="text" required="required" id="name" form="repsignup" placeholder="John Doe" size="70" maxlength="70" />
</h4>
<h4>
<label for="repid">Rep ID:</label>
<input name="repid" type="text" id="repid" form="repsignup" placeholder="DoeJ" size="32" maxlength="15" />
</h4>
<h4>
<label for="email">Email:</label>
<input name="email" type="email" required="required" id="email" form="repsignup" placeholder="Jdoe#gmail.com" size="89" maxlength="100" />
</h4>
<p><strong>* Your default password is "password" all lowercase! Please change it as soon as you log in.</strong></p>
<p> </p>
<p>*As of right now we only have reps in the United States</p>
<h4>
<label for="address">Address:</label>
<input name="address" type="text" required="required" id="address" form="repsignup" placeholder="12345 Street" size="86" />
</h4>
<h4>
<label for="city">City:</label>
<input name="city" type="text" required="required" id="city" form="repsignup" placeholder="Detroit" size="92" />
</h4>
<h4>
<label for="country">State:</label>
<input name="State" type="text" required="required" id="address3" form="repsignup" placeholder="ex. MI" size="90" maxlength="2" />
</h4>
<h4>
<label for="address5">Zipcode:</label>
<input name="zipcode" type="text" required="required" id="address5" form="repsignup" placeholder="48201" size="87" />
</h4>
<h4>
<label for="gender">Gender:</label>
<select name="gender" size="1" id="gender" form="repsignup">
<option value="Null">No Answer</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</h4>
<h4>
<label for="birthday">Birthday:</label>
<input name="birthday" type="date" required="required" id="birthday" form="repsignup" />
</h4>
<h4>
<label for="about">About you:<br />
</label>
<textarea name="about" cols="100" rows="10" maxlength="250" id="about" form="repsignup"></textarea>
</h4>
<h4>
<label for="shirtsize">Shirt Size:</label>
<select name="shirtsize" id="shirtsize" form="repsignup">
<option value="as">Adult Small</option>
<option value="am">Adult Medium</option>
<option value="al">Adult Large</option>
<option value="axl">Adult XL</option>
<option value="axxl">Adult XXL</option>
</select>
</h4>
<h4>What team are you appling for? (Select all that apply) </h4>
<p>
<input name="skate" type="checkbox" id="skate" form="repsignup" />
<label for="skate">Skateboard </label>
</p>
<p>
<input name="snow" type="checkbox" id="snow" form="repsignup" />
<label for="snow">Snowboard </label>
</p>
<p>
<input name="longboard" type="checkbox" id="longboard" form="repsignup" />
Longboard
</p>
<p>
<input name="video" type="checkbox" id="video" form="repsignup" />
Video Production
</p>
<p>
<input name="music" type="checkbox" id="music" form="repsignup" />
Music Production
</p>
<p>
<input name="model" type="checkbox" id="model" form="repsignup" />
<label for="model">Modeling </label>
</p>
<p> </p>
<h4>Links to your contacts</h4>
<p>
<label for="instagram">Instagram:</label>
<input name="instagram" type="text" id="instagram" form="repsignup" size="86" maxlength="80" />
</p>
<p>
<label for="facebook">Facebook:</label>
<input name="facebook" type="text" id="facebook" form="repsignup" size="86" maxlength="80" />
</p>
<p>
<label for="twitter">Twitter:</label>
<input name="twitter" type="text" id="twitter" form="repsignup" size="86" maxlength="80" />
</p>
<p>
<label for="youtube">YouTube:</label>
<input name="youtube" type="text" id="youtube" form="repsignup" size="86" maxlength="80" />
</p>
<p>
<label for="website">Website:</label>
<input name="website" type="text" id="website" form="repsignup" size="86" maxlength="80" />
</p>
<p>
<label for="otherlinks">Other:</label>
<input name="otherlinks" type="text" id="otherlinks" form="repsignup" size="86" maxlength="80" />
</p>
<p> </p>
<p><strong>Here is some stuff you should read up on:</strong></p>
<p>Reps are paid out when they hit $5 in commison.</p>
<p>Rep codes do NOT work with coupons.</p>
<p>Default commison is 10% of all your sales but may vary.</p>
<p> </p>
<p><strong>For any of your media content to be used you must agree to the the terms and conditions</strong></p>
<p>
<input name="media" type="checkbox" disabled="disabled" id="media" form="repsignup" checked="checked" />
I agree to the terms and conditions for usage of my media and allow the promotion of me as a individual </p>
<p>
<input name="inform" type="checkbox" id="inform" form="repsignup" checked="checked" />
<label for="inform">Inform me of my sales</label>
as a rep
</p>
<p>
<input name="DATE" type="hidden" id="DATE" value="<?php echo date('Y-m-d'); ?>" />
<input name="com" type="hidden" id="com" form="repsignup" value="10" />
<input name="country" type="hidden" id="country" value="United States of America" />
<input name="password" type="hidden" id="password" form="repsignup" value="861aab8d5bdd93565a7454e5e5754f8f" />
<input name="1" type="hidden" id="1" value="1" />
<input name="discount" type="hidden" id="discount" value="5" />
<input name="2" type="hidden" id="2" value="2" />
<input name="enddate" type="hidden" id="enddate" value="3000-01-01 00:00:00" />
<input name="avail" type="hidden" id="avail" value="30000000" />
</p>
<p>
<?php print imageorsubmit(#$imgsubmit,$GLOBALS['xxSubmt'],'submit')?></p>
<p>
<input type="hidden" name="MM_insert" value="repsignup" />
</p>
</form>
And here is the javascript I am using to validate it
<script type="text/javascript">
$( document ).ready(function() {
$("#repsignup").submit(function(event){
//alert("The paragraph was clicked.");
var name = $("#name").val();
var repid = $("#repid").val();
var address = $("#address").val();
var city = $("#city").val();
var state = $("#address3").val();
var zipcode = $("#address5").val();
var gender = $("#gender").val();
var birthday = $("#birthday").val();
var about = $("#about").val();
var skate = $("#skate").val();
var snow = $("#snow").val();
var longboard = $("#longboard").val();
var video = $("#video").val();
var music = $("#music").val();
/*Social fields*/
var instagram = $("#instagram").val();
var facebook = $("#facebook").val();
var twitter = $("#twitter").val();
var youtube = $("#youtube").val();
var website = $("#website").val();
var otherlinks = $("#otherlinks").val();
//alert(name.split(" ").length);
var a = isValidCharacter(name);
//alert(a);
/*Name validation*/
if(name.split(" ").length==2 && a)
;
else{
alert('Please enter first and last name separated by a space. No special character is allowed');
event.preventDefault();
}
validRepid = isValidCharacter(repid);
if(repid.indexOf('>') > -1 || repid.indexOf('<') > -1){
alert('Rep ID should not have any special character.');
event.preventDefault();
}
validAddress = isValidCharacter(address);
if(address.indexOf('>') > -1 || address.indexOf('<') > -1){
alert('Address should not have any special character.');
event.preventDefault();
}
validCity = isValidCharacter(city);
if(city.indexOf('>') > -1 || city.indexOf('<') > -1){
alert('City should not have any special character.');
event.preventDefault();
}
validState = isValidCharacter(state);
if(state.indexOf('>') > -1 || state.indexOf('<') > -1){
alert('State should not have any special character.');
event.preventDefault();
}
validZipcode = isValidCharacter(zipcode);
if(zipcode.indexOf('>') > -1 || zipcode.indexOf('<') > -1){
alert('Zipcode should not have any special character.');
event.preventDefault();
}
validGender = isValidCharacter(gender);
if(gender.indexOf('>') > -1 || gender.indexOf('<') > -1){
alert('Gender should not have any special character.');
event.preventDefault();
}
if (birthday.indexOf('>') > -1 || birthday.indexOf('<') > -1)
{
alert('Birthday should not have any special character.');
event.preventDefault();
}
validAbout = isValidCharacter(about);
if(!validAbout){
alert('About field should not have any special character.');
event.preventDefault();
}
var flag = false;
if($("#skate").prop("checked"))
flag = true;
if($("#snow").prop("checked"))
flag = true;
if($("#skate").prop("checked"))
flag = true;
if($("#longboard").prop("checked"))
flag = true;
if($("#video").prop("checked"))
flag = true;
if($("#music").prop("checked"))
flag = true;
if($("#model").prop("checked"))
flag = true;
if(flag==false){
alert('Please select at least one team to apply for.');
event.preventDefault();
}
if(instagram.indexOf('>') > -1 || instagram.indexOf('<') > -1){
alert('Instagram field should not have any special character.');
event.preventDefault();
}
if(facebook.indexOf('>') > -1 || facebook.indexOf('<') > -1){
alert('Facebook field should not have any special character.');
event.preventDefault();
}
if(twitter.indexOf('>') > -1 || twitter.indexOf('<') > -1){
alert('Twitter field should not have any special character.');
event.preventDefault();
}
if(youtube.indexOf('>') > -1 || youtube.indexOf('<') > -1){
alert('Youtube field should not have any special character.');
event.preventDefault();
}
if(website.indexOf('>') > -1 || website.indexOf('<') > -1){
alert('Website field should not have any special character.');
event.preventDefault();
}
if(otherlinks.indexOf('>') > -1 || otherlinks.indexOf('<') > -1){
alert('Otherlinks field should not have any special character.');
event.preventDefault();
}
});
});
function isValidCharacter(str){
return !/[~`#$%\^&*+=\-\[\]\\';,/{}|\\":<>\?]/g.test(str);
}
</script>
you can validate all fields without getting each single value and only using one function for it:
$(document).ready(function(){
var allFine = true;
function valdiate(){
var value = $(this).val();
if(value !== null && value.trim().length() > 0 && !value.match(/[\<\>]/));
var allFine = false;
$(this).css('border', '1px solid red');
}
// selector for all required input and textarea tags in your html
$('form').find('input:required, textarea:required').each(validate);
$('form').on('submit', function(){
if(!allFine) {
event.preventDefault();
event.stopPropagination();
alert('there is a failure, have a look on the red bordered fields');
}
// otherwise the form is submitted normal
});
})
if you need to check all input fields for validation, remove the :required flag in the selector and remove null and length check from the if
remember, if you use html5 you also can use pattern attribute to input element with regex:
<input name="myInput" type="text" pattern="[a-zA-Z0-9 .,-]" required>
or some other regex you want
I have a validator for phone no with js and it is working fine but eve after getting false as return the php code gets executed. how to stop it from executing.
This is my js function
function phonenumber(inputtxt){
var phoneno = /^\d{10}$/;
if(inputtxt.value.match(phoneno))
{return true;}
else
{alert("message");
return false;}
}
This is my html code
<form action="get_quote.php" method="post" name="quote" class="quote">
<font class="label"><input type="text" class="quote" placeholder="Enter Your Name" autocomplete="off" name="name" required/>
<input type="text" class="quote" autocomplete="off" placeholder="Enter Your Mobile Number" name="mobile" required/>
<input type="email" class="quote" autocomplete="off" placeholder="Enter Your Email Id" name="email" required/><br />
</center>
<div>
<div class="rest">
<input type="radio" id="new" name="condition" class="rest" checked>New<br />
<input type="radio" id="mod" name="condition" class="rest"/>Modification
</div>
<div class="rest">
<input type="checkbox" name="web" />Website<br />
<input type="checkbox" name="android" />Android Application<br />
<input type="checkbox" name="ios" />IOS Aplication<br />
<input type="checkbox" name="seo" />SEO/SMO<br />
<input type="checkbox" name="desktop" />Computer Software<br />
</div>
</div>
<br><center>
<textarea name="desc" placeholder="Enter Your Description" required></textarea><br /></font>
<button type="submit" onclick="phonenumber(document.quote.mobile)" class="quote">Get Quote</button>
</form>
Working Fiddle.
Add return in onclick before function call :
<button type="submit" onclick="return phonenumber(document.quote.mobile)" class="quote">Get Quote</button>
Hope this helps.
You can get mobile field value by using this:
function phonenumber()
{
var inputtxt = document.getElementsbyName("mobile");
var phoneno = /^\d{10}$/;
if(inputtxt.value.match(phoneno))
{
return true;
}
else
{
alert("message");
return false;
}
}
And than no need to pass param in onclick event, use this:
<button type="submit" onclick="phonenumber()" class="quote">Get Quote</button>