J
jaih2Apr 28, 2022
Hi!
Does the code provide validation for a phone number? Or is it a custom solution?
I found a notification about the wrong number in the plugins.form file.
number:"Please enter a valid number."
Validation
7 replies·opened Apr 28, 2022
J
jaih2Apr 28, 2022
And how to trigger a notification on an invalid email, it highlights it but there is no notification, email:"Please enter a valid email address."
S
SemiColonWebSTAFFApr 29, 2022
Hello,
- Currently Validation for the Phone Numbers is not included out of the box but can be enabled easily. Simply follow the steps below:
Download the required method from Github: https://github.com/jquery-validation/jquery-validation/tree/master/src/additional to the
js/Folder.Link the JS File in the HTML File at the bottom just after the
js/plugins.min.jsFile.Then use the following code:
<input type="text" id="template-contactform-phone" name="template-contactform-phone" value="" class="sm-form-control show-error-msg required phoneUS" />Assuming you have chosen the phoneUS Validation method. Change this class according to the method you actually choose.
- To display an Error Message for the Invalid Email, simply add the
.show-error-msgClass to the<input>Tag. Example:
<input type="email" id="template-contactform-email" name="template-contactform-email" value="" class="required email sm-form-control show-error-msg" />This will definitely work fine. Hope this Helps!
Let us know if we can help you with anything else or if you find any further issues.
J
jaih2Apr 29, 2022
Great! Thanks!
J
jaih2Apr 29, 2022
Faced the following problem.
On the local computer, mail validation works as expected. But when installing the file on the server, validation works only after clicking send.
<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="author" content="SemiColonWeb" />
<!-- Stylesheets
============================================= -->
<link href="https://fonts.googleapis.com/css?family=Lato:300,400,400i,700|Poppins:300,400,500,600,700|PT+Serif:400,400i&display=swap" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="css/bootstrap.css" type="text/css" />
<link rel="stylesheet" href="style.css" type="text/css" />
<link rel="stylesheet" href="css/dark.css" type="text/css" />
<link rel="stylesheet" href="css/font-icons.css" type="text/css" />
<link rel="stylesheet" href="css/animate.css" type="text/css" />
<link rel="stylesheet" href="css/magnific-popup.css" type="text/css" />
<!-- DatePicker CSS -->
<link rel="stylesheet" href="css/components/datepicker.css" type="text/css" />
<!-- Bootstrap File Upload CSS -->
<link rel="stylesheet" href="css/components/bs-filestyle.css" type="text/css" />
<link rel="stylesheet" href="css/custom.css" type="text/css" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- Document Title
============================================= -->
<title>Jobs - Forms | Canvas</title>
<style>
.file-caption.icon-visible .file-caption-name {
font-family: 'Lato', sans-serif;
color: #666;
}
</style>
</head>
<body class="stretched">
<!-- Document Wrapper
============================================= -->
<div id="wrapper" class="clearfix">
<!-- Content
============================================= -->
<section id="content">
<div class="content-wrap">
<div class="container clearfix">
<div class="form-widget">
<div class="form-result"></div>
<div class="row">
<div class="col-lg-6">
<form class="row" action="include/form.php" method="post" enctype="multipart/form-data">
<div class="form-process">
<div class="css3-spinner">
<div class="css3-spinner-scaler"></div>
</div>
</div>
<div class="col-12 form-group">
<label>Name:</label>
<input type="text" name="jobs-application-name" id="jobs-application-name" class="form-control required" value="" placeholder="Enter your Full Name">
</div>
<div class="col-12 form-group">
<label>Email:</label>
<input type="email" name="jobs-application-email" id="jobs-application-email" class="form-control required show-error-msg" value="" placeholder="Enter your Email">
</div>
<div class="col-12 form-group">
<div class="row">
<div class="col-md-6 form-group">
<label>Phone:</label>
<input type="text" id="template-contactform-phone" name="template-contactform-phone" value="+7" class="sm-form-control show-error-msg required mobileUs" />
</div>
<div class="col-md-6 form-group">
<label>Location:</label>
<input type="text" name="jobs-application-location" id="jobs-application-location" class="form-control" value="" placeholder="Enter your City as Location">
</div>
<div class="w-100"></div>
<div class="col-md-6 form-group">
<label>Date Of Birth:</label>
<input type="text" class="form-control dobpicker required" name="jobs-application-date-of-birth" id="jobs-application-date-of-birth" value="" placeholder="MM/DD/YYYY" data-date-end-date="-18y">
</div>
<div class="col-md-6 form-group">
<label>Gender:</label>
<div class="btn-group d-flex" data-bs-toggle="buttons">
<input type="radio" class="btn-check" name="jobs-application-gender" id="jobs-application-gender-male" value="Male">
<label class="btn btn-outline-secondary nott ls0" for="jobs-application-gender-male">Male</label>
<input type="radio" class="btn-check" name="jobs-application-gender" id="jobs-application-gender-female" value="Female">
<label class="btn btn-outline-secondary nott ls0" for="jobs-application-gender-female">Female</label>
</div>
<!-- <select class="form-select" name="jobs-application-gender" id="jobs-application-gender">
<option value="">-- Select One --</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select> -->
</div>
<div class="w-100"></div>
<div class="col-md-6 form-group">
<label>Type:</label>
<select class="form-select required" name="jobs-application-type" id="jobs-application-type">
<option value="">-- Select One --</option>
<option value="Part-Time">Part-Time</option>
<option value="Full-Time">Full-Time</option>
<option value="Internship">Internship</option>
<option value="Freelance">Freelance</option>
</select>
</div>
<div class="col-md-6 form-group">
<label>Experience:</label>
<select class="form-select required" name="jobs-application-experience" id="jobs-application-experience">
<option value="">-- Select One --</option>
<option value="Less than 1 Year">Less than 1 Year</option>
<option value="1-4 Years">1-4 Years</option>
<option value="4-7 Years">4-7 Years</option>
<option value="7+ Years">7+ Years</option>
</select>
</div>
</div>
<div class="form-group">
<label>Upload CV:</label>
<input type="file" id="jobs-application-resume" name="jobs-application-resume" class="file-loading form-select required" data-show-preview="false" />
</div>
<div class="form-group">
<label>Describe Yourself:</label>
<textarea name="jobs-application-message" id="jobs-application-message" class="form-control required" cols="30" rows="10"></textarea>
</div>
</div>
<div class="col-12 d-none">
<input type="text" id="jobs-application-botcheck" name="jobs-application-botcheck" value="" />
</div>
<div class="col-12">
<button type="submit" name="jobs-application-submit" class="btn btn-secondary">Send Message</button>
</div>
<input type="hidden" name="prefix" value="jobs-application-">
</form>
</div>
</div>
</div>
</div>
</div>
</section><!-- #content end -->
</div><!-- #wrapper end -->
<!-- Go To Top
============================================= -->
<div id="gotoTop" class="icon-angle-up"></div>
<!-- JavaScripts
============================================= -->
<script src="js/jquery.js"></script>
<script src="js/plugins.min.js"></script>
<!-- DatePicker JS -->
<script src="js/components/datepicker.js"></script>
<!-- Bootstrap File Upload Plugin -->
<script src="js/components/bs-filestyle.js"></script>
<!-- TinyMCE Plugin -->
<script src="js/components/tinymce/tinymce.min.js"></script>
<!-- Footer Scripts
============================================= -->
<script src="js/functions.js"></script>
<script src="js/mobileUS.js"></script>
<script>
jQuery(document).ready( function(){
$('.dobpicker').datepicker({
autoclose: true,
});
$("#jobs-application-resume").fileinput({
required: true,
browseClass: "btn btn-secondary",
browseIcon: "",
removeClass: "btn btn-danger",
removeLabel: "",
removeIcon: "<i class='icon-trash-alt1'></i>",
showUpload: false
});
tinymce.init({
selector: '#jobs-application-message',
menubar: false,
setup: function(editor) {
editor.on('change', function(e) {
editor.save();
});
}
});
})
$(document).ready(function() {
$.validator.addMethod( "mobileUS", function( phone_number, element ) {
var usPhone_number = phone_number.replace( /\(|\)|\s+|-/g, "" );
return this.optional( element ) || usPhone_number.length > 9 && /^((\+1|1|1)+([0-9]){10})$/.test( usPhone_number );
}, "Please enter a valid phone number" );
});
</script>
</body>
</html>Could you see for yourself what the problem is?
S
SemiColonWebSTAFFApr 30, 2022
Hello,
Can you please provide us with a Live URL so that we can check out the exact issue and provide you with more accurate assistance on this. Thanks for your Patience.
Meanwhile, do let us know if we can help you with anything else or if you find any further issues with Canvas.
J
jaih2Apr 30, 2022
https://good-1.ru/forms-job.html
Everything is here. It's strange but on the mobile version everything works as it should.
S
SemiColonWebSTAFFMay 2, 2022
Hello,
Thanks for your Patience!
We have just checked this out and the Validation along with Validation Messages appear to be working correctly for us on Desktops. This could probably be an issue with your Browser Cache, so simply clear it or hard refresh the Page and this issue should be resolved automatically.
Hope this Helps!
Let us know if we can help you with anything else or if you find any further issues.
Have the same question, or something new?
Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.
Reply on the dashboard