How to design your own parsley.js pattern? Like I want pattern for phone number and CNIC:
Phone number= XXXX XXXXXXX (0321 5464695)
CNIC= XXXXX XXXXXXX X (38560 6665849 1)
You can accomplish this by crafting your own validator.
As the documentation refers, you can do something like this:
<form method="post" action="" id="target">
<input type="text" name="cnic" value="" data-parsley-cnic />
<input type="submit" value="Submit">
</form>
<script type="text/javascript">
$(document).ready(function() {
window.ParsleyValidator
.addValidator('cnic', function (value, requirement) {
var patt = /^\d{5} \d{7} \d{1}$/i;
return patt.test(value);
}, 32)
.addMessage('en', 'cnic', 'This value is incorrect');
$("#target").parsley();
});
</script>
You can see this working with this jsfiddle
Related
i get recaptcha, put my domain.com.ar and get a key
i use this code
Code.gs
function doGet() {
var t = HtmlService.createTemplateFromFile('Index')
return t.evaluate().setTitle("Contacto de Usuarios").setSandboxMode(HtmlService.SandboxMode.IFRAME);
}
function include(filename) {
return HtmlService.createHtmlOutputFromFile(filename)
.getContent();
}
function processForm(formObject) {
var userCompleto = formObject.userCompleto;
var Email = formObject.Email;
var Movil = formObject.Movil;
var Mensaje = formObject.Mensaje
var captcha = formObject.g-recaptcha-response
var captcha1 = formObject.g-recaptcha
Logger.log(userCompleto+Email+Movil+captcha)
//etc code ........
}
Index.htm
<form id="myForm2" action="?" method="post" >
<input type="text" name="userCompleto" value="" class="ss-q-short" id="userCompleto" size="30">
<input type="text" name="Email" value="" class="ss-q-short" id="Email" size="30">
<input type="text" name="Movil" value="" class="ss-q-short" id="Movil" size="30">
<textarea rows="4" cols="50" name="Mensaje" value="" class="ss-q-short" id="Mensaje" size="30" >
<div id= "example2"></div>
<input type="button" value="Comunicate" id="comunica" name="comunica" style="height: 30px" onclick="validateForm2()" />
</form>
<?!= include('JavaScript'); ?>
JavaScript.htm
<script type="text/javascript">
var onloadCallback = function() {
var widgetId2 = grecaptcha.render(document.getElementById('example2'), {
'sitekey' : '6LeDlhUTAAAAAMbdjlTLHDzA8MMb_pQS6epqgLHs'
});
};
</script>
<script src="https://www.google.com/recaptcha/api.js onload=onloadCallback&render=explicit" async defer>
</script>
<script type='text/javascript' >
function validateForm2(){
//..validation
var objDatosGuardar = document.getElementById("myForm2")
google.script.run.processForm2(objDatosGuardar);
};
</script>
trow a ERROR ERROR: Invalid domain for site key
I try change de key for the captcha and nothing
I try to put in the key new domains like 127.0.0.0
I dont get Looger.log nothing
Please Help
Could you have a look of your environment and check if one of the cases below applies?
Someone seems like solve the same problem by deleting the existing key and reissuing the key.
reCAPTCHA ERROR: Invalid domain for site key
Using reCAPTCHA on localhost: This question below says that there is a possibility that you need to reissue, if you migrated from the V1 to V2.
And one of the comments in this question also suggests you may need to add a different name, not localhost.
I personally used reCaptcha and reCaptchaV2 and never came across this problem, and noticed that I always used a domain name specified by hosts file(/etc/hosts) even if it run in my localhost.
thank you in advance for any help given. I'm just learning jQuery and AJAX and would appreciate some help with the following code. All validation rules work, the form submits and the page does not refresh. The problem is that the form values are not clearing/resetting to default after the submit has triggered. Thoughts?
**********EDITED to include HTML markup*************
<div id="form">
<h1 class="title">Contact Us</h1><!-- title ends -->
<p class="contactUs">Ask about our services and request a quote today!</p><!-- contactUs ends -->
<div id="success"><p>Your message was sent successfully. Thank you.</p></div>
<p id="required">* All fields required.</p>
<form name="form" id="contactMe" method="post" action="process.php" onSubmit="return validateForm()" enctype="multipart/form-data">
<input class="txt" type="text" maxlength="50" size="50" required name="name" value="<?php echo $_GET['name'];?>" placeholder="Name" />
<div id="nameError"><p>Your name is required.</p></div>
<input class="txt" type="text" maxlength="50" size="50" required name="email" value="<?php echo $_GET['email'];?>" placeholder="Email Address" />
<div id="emailError"><p>A valid email address is required.</p></div>
<textarea name="message" rows="6" cols="40" required placeholder="Message"></textarea>
<div id="messageError"><p>A message is required.</p></div>
<input type="hidden" maxlength="80" size="50" id="complete" name="complete" placeholder="Please Keep This Field Empty" />
<input type="submit" value="SUBMIT" name="submit" />
<input type="reset" value="RESET" name="reset" />
</form>
</div><!-- form ends -->
//hide form submit success message by default. to be shown on successfull ajax submission only.
$(document).ready(function() {
if ($('#success').is(':visible')){
$(this).hide()
}
});
//form validation
function validateForm() {
//name
var a=document.forms["form"]["name"].value;
if (a==null || a=="")
{
$('#nameError').fadeIn(250);
return false;
}
//email address
var c=document.forms["form"]["email"].value;
var atpos=c.indexOf("#");
var dotpos=c.lastIndexOf(".");
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=c.length)
{
$('#emailError').fadeIn(250);
return false;
}
//message
var e=document.forms["form"]["message"].value;
if (e==null || e=="")
{
$('#messageError').fadeIn(250);
return false;
}
}//javascript form validation ends
//ajax submit and clear form on success
$(function () {
$('form').on('submit', function (e) {
var myForm = validateForm();
if (myForm == false){
e.preventDefault();//stop submission for safari if fields empty
}
else{
$.ajax({
type: 'post',
url: 'process.php',
data: $('form').serialize(),
success: function () {
$('#success').fadeIn(250);
if ($('#nameError, #emailError, #messageError').is(':visible')) {
$('#nameError, #emailError, #messageError').fadeOut(250);
}
$('form')[0].reset();//clear form after submit success
}//success ends
});//ajax ends
e.preventDefault();//prevent default page refresh
}//else ends
});//submit ends
});//function ends
//if reset button is clicked AND messages displayed, remove all form html messages
$(document).ready(function() {
$('#form input[type="reset"]').click(function() {
if ($('#success, #nameError, #emailError, #messageError').is(':visible')) {
$('#success, #nameError, #emailError, #messageError').fadeOut(250);
}
});
});
By giving your input id="reset" and/or name="reset", you effectively overwrote the form.reset method of the form because by doing so you made form.reset target the reset button. Simply give it a different id and name value.
Never give elements name or id attributes that equal the name of a property of a dom node.
Have problem with fancybox and jquery validate plugin when form is in fancybox container.
For examle (inline):
html:
<script>
$(document).ready(function(){ $.fancybox('
<form class="myform">
<input type="text" name="email" class="email" />
<input type="submit" value="submit" name="submit" />
</form>
');
})
</script>
js file:
$(".myform").validate(
{
rules: {
email: "required",
email: "email"
}
}
);
How to make jquery validation pluging to work in fancybox?
Do two things...
Use the afterLoad FancyBox callback function to initialize .validate() immediately after the form is loaded.
Put the content for FancyBox in a hidden div instead of in your jQuery. It's cleaner.
Note: You may want to reconsider using email for the name attribute. It has potential to cause great confusion since the rule is also called email.
HTML:
<a id="test" href="#inline">Test</a>
<div style="display:none" id="inline">
<form class="myform">
<input type="text" name="email" class="email" />
<input type="submit" value="submit" name="submit" />
</form>
</div>
jQuery:
$(document).ready(function () {
$('#test').fancybox({
afterLoad: function() {
$('.myform').validate({
// rules and options for validate plugin,
rules: {
email: { // "email" is name of the field
required: true,
email: true // "email" is name of the rule
}
}
});
}
});
});
Working DEMO: http://jsfiddle.net/ZMEEW/
I am used following code hide DataPicker element only hide textbox does not hide image of calender.
HTML Code
#Html.Telerik().DatePickerFor(model=>model.Dateofpublisher)
Jquery
$('[name="Dateofpublisher"]').hide();
You dont need to write DatePickerFor.I always do it as following:
<input id="datepicker" name="date*" type="text" value="" />
*The name of your datepicker should be the same with the name of your model date filed.
And in script codes just write:
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
Note:jqueryui files should be added first.
HTML
<div id="Date">
<input id="datepicker" name="date*" type="text" value="" />
</div>
Jquery
$(document).ready(function () {
$("Date").hide();
});
I am combing the jQuery validation plug-in with the jQuery Form Plugin to submit the form via AJAX.
This works perfectly in Firefox & Chrome, but (as usual) Internet Explorer is being a pain. For reasons that are alluding me, IE is ignoring the ajaxSubmit, as a result it submits the form in the normal fashion.
I've followed the validation plug-in's documentation when constructing my code:
JS:
<script src="/js/jquery.validate.min.js" type="text/javascript"></script>
<script src="/js/jquery.form.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
var validator = $("#form_notify").validate({
messages: {
email: {
required: 'Please insert your email address. Without your email address we will not be able to contact you!',
email:'Please enter a <b>valid</b> email address. Without a valid email address we will not be able to contact you!'
}
},
errorLabelContainer: "#error",
success: "valid",
submitHandler: function(form) {$(form).ajaxSubmit();}
});
$('#email').blur(function() {
if (validator.numberOfInvalids() > 0) {
$("#label").addClass("label_error");
return false;
}
else {$("#label").removeClass("label_error");}
});
$('#form_notify').submit(function() {
if (validator.numberOfInvalids() == 0) {
$(this).fadeOut('fast', function() {$('#thank-you').fadeIn();});
return true;
}
return false;
});
});
</script>
Form HTML:
<form id="form_notify" class="cmxform" name="form_notify" action="optin.pl" method="get">
<fieldset>
<div class="input">
<label id="label" for="email">Email Address:</label>
<input type="text" id="email" name="email" value="" title="email address" class="{required:true, email:true}"/>
<div class="clearfix"></div>
</div>
<input type="hidden" name="key" value="sub-745-9.224;1.0.0.0.0.0.0.0.0.0.0.0.0.0.0.0;;subscribe-224.htm">
<input type="hidden" name="followup" value="19">
<input type="submit" name="submit" id="submit-button" value="Notify Me">
<div id="error"></div>
</fieldset>
</form>
I can't understand what is causing IE to act differently, any assistance would be greatly appreciated.
I can provide more information if needed.
Thanks in advance!
Try the following:
$('#form_notify').submit(function(e) {
e.preventDefault();
if (validator.numberOfInvalids() == 0) {
$(this).fadeOut('fast', function() {$('#thank-you').fadeIn();});
return true;
}
return false;
});