Parsley.js Not Validating - javascript

<!-- Load jQuery from Google CDN !-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<!-- Load jQuery Validation Code !-->
<script type="text/javascript" src="js/parsley-standalone.min.js"></script>
<form data-validate="parsley" data-show-errors="true" method="post" action="php/mail.php">
<input type="text" class="contact_field" placeholder="Your Name" name="name" data-required="true">
<input type="text" class="contact_field" placeholder="Your E-Mail Address" name="email" data-required="true">
<textarea class="contact_field" placeholder="Question or Comment" rows="8" name="message" data-required="true"></textarea>
<input type="submit" class="contact_button" value="Send!">
<input type="reset" class="contact_button" value="Reset">
</form>
Every time I try to submit form, no validation occurs. A blank form easily passes and send the e-mail. Any idea what I'm doing wrong with this script?

Related

How to prevent google app script reloading/redirecting my webpage after form data submission ..?

I am using google app script to submit form data to my email. It's a webpage contact form. But by default after hitting the submit button it takes to a different page and shows a "result:success" weird kinda message. I want to prevent that reload or redirect. How can I do that?
HTML
<form id="email-form" class="gform" action="https://script.google.com/macros/s/AKfyJu890G2t-RuhJxTNIA/exec" method="post">
<div class="email-name">
<input id="name" name="name" type="text" class="form-control" placeholder="write name" autocomplete="off">
</div>
<div class="email-main">
<input id="email" name="email" type="text" class="form-control" placeholder="write email" autocomplete="off">
</div>
<div class="email-subject">
<input id="subject" name="subject" type="text" class="form-control" placeholder="write related sub" autocomplete="off">
</div>
<div class="email-message">
<textarea id="message" name="message" class="form-control" placeholder="write message here"></textarea>
</div>
<button id="send-email" type="submit">SUBMIT EMAIL</button>
</form>
I can add an alert using onclick event but still the reload happens. Please provide javascript code for preventing the default behavior for this form.
I've been able to get around this before by moving the submit button out of the form.
<form id="email-form" class="gform" action="https://script.google.com/macros/s/AKfyJu890G2t-RuhJxTNIA/exec" method="post">
<div class="email-name">
<input id="name" name="name" type="text" class="form-control" placeholder="write name" autocomplete="off">
</div>
<div class="email-main">
<input id="email" name="email" type="text" class="form-control" placeholder="write email" autocomplete="off">
</div>
<div class="email-subject">
<input id="subject" name="subject" type="text" class="form-control" placeholder="write related sub" autocomplete="off">
</div>
<div class="email-message">
<textarea id="message" name="message" class="form-control" placeholder="write message here"></textarea>
</div>
</form>
<button id="send-email" type="submit">SUBMIT EMAIL</button>
If that does not work you can try using target to a hidden iframe.

Implement jQuery in separated file with html

Is from 2 hours that im trying to understand how to use jQuery with a file html, but I can't figure it out!
I want a simple strngh password using jQuery and I found this useful link: http://jsfiddle.net/jquery4u/mmXV5/
My problem now is how allow file html communicate with this script?
my file html is very simple:
<form name="register" id="signup" method="post" onsubmit="return validateForm()" action="register_user.php">
<div class="header">
<h3>Registration</h3>
<p>Complete this form to register.<br/>* required field</p>
</div>
<div class="sep"></div>
<div class="inputs">
<input type="text" placeholder="Name" name="name" autofocus />*
<input type="text" placeholder="Surname" name="surname" autofocus />*
<input type="text" placeholder="Email" name="email" autofocus />*
<input type="password" placeholder="Password" name="password" />*
<div class="sep"></div>
<div id="messages"></div>
<input type="submit" id="submit" name="Submit" value="CONFIRM REGISTRATION">
</div>
</form>
As you see, javascript file of the link is very consistent so I want to put all codes into another file, but after that I really don't know how to link 2 file and work togheter!
Here is a useful link that could help you learn more about jQuery.
You need to add this to your file (in the head or right BEFORE closing the body tag).
<script>src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
This allows you to use the jQuery library.
After you include the ajax library from google (this is preferable to be added inside the <head> *insert here </head> tags.
Now, if you have an external js file, you just add your jQuery code to it and simply import it in your html file.
<script src="yourFileWithJquery.js"></script>. Note that the js file has to be in the same folder with your html file.
Now you are good to go.
Here is a good example on your code:
<head>
<script> src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="myJsFile.js"></script>
</head>
<body>
<form name="register" id="signup" method="post" onsubmit="return validateForm()" action="register_user.php">
<div class="header">
<h3>Registration</h3>
<p>Complete this form to register.<br/>* required field</p>
</div>
<div class="sep"></div>
<div class="inputs">
<input type="text" placeholder="Name" name="name" autofocus />*
<input type="text" placeholder="Surname" name="surname" autofocus />*
<input type="text" placeholder="Email" name="email" autofocus />*
<input type="password" placeholder="Password" name="password" />*
<div class="sep"></div>
<div id="messages"></div>
<input type="submit" id="submit" name="Submit" value="CONFIRM REGISTRATION">
</div>
</form>
</body>

TinyMCE not initializing, but no JavaScript errors

I have a VERY simple email form (for a members-only page for a private club) to send email blasts. The code is simply:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="../../../tinymce/jscripts/tiny_mce/tiny_mce.js"></script>
</head>
<body>
<h1>Email Blast</h1>
<form method="post">
<input type="hidden" name="from" value="blast#club.com" />
<input type="hidden" name="to" value="blast#club.com" />
<input type="hidden" name="reply" value="from#club.com" />
<input type="hidden" name="bcc" value="Tester <test#club.com>" />
<label for="subject">Subject</label><br/>
<input type="text" name="subject" id="subject" style="width: 600px" /><br/>
<label for="message">Message</label><br/>
<textarea id="message" name="message" rows="15" cols="100" class="tinymce"></textarea><br/>
<br/><input type="submit" value="Send Email" name="submit">
</form>
</body>
<script type="text/javascript">
jQuery(document).ready(function() {
tinymce.init({selector:"textarea.tinymce"});
});
</script>
For some reason the page simply isn't rendering the textarea.tinymce as I would expect, but there are no error messages in the JS Console and all the breakpoints are hit as I would expect.
What am I missing?
You should place your script tag inside the body tag, just before closing it.
If you put anything after closing your body tag, the browser will ignore it.
Look at the example below - if you place the script tag inside the body tag, it works like a charm:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/4.2.5/tinymce.jquery.min.js"></script>
</head>
<body>
<h1>Email Blast</h1>
<form method="post">
<input type="hidden" name="from" value="blast#club.com" />
<input type="hidden" name="to" value="blast#club.com" />
<input type="hidden" name="reply" value="from#club.com" />
<input type="hidden" name="bcc" value="Tester <test#club.com>" />
<label for="subject">Subject</label><br/>
<input type="text" name="subject" id="subject" style="width: 600px" /><br/>
<label for="message">Message</label><br/>
<textarea id="message" name="message" rows="15" cols="100" class="tinymce"></textarea><br/>
<br/><input type="submit" value="Send Email" name="submit">
</form>
<script type="text/javascript">
jQuery(document).ready(function() {
tinymce.init({selector:"textarea.tinymce"});
});
</script>
</body>
</html>

How to have one input field replace another when the initial is submitted?

I am making a simple login form for a website, initially, the username field will show with the submit button. When the submit button is pressed, the username form should disappear and the password form should replace it. I have the following code:
HTML
<!-- Username form -->
<div id="form1">
<form>
<input type="text" id="username" name="username">
<input type="submit" value="" onclick="switchForm()">
</form>
</div>
<!-- Password form -->
<div id="form2">
<form>
<input type="password" id="password" name="password">
<input type="submit" value="" onclick="#">
</form>
Javascript
function switchForm() {
document.getElementById("form1").style.display = "none";
document.getElementById("form2").style.display = "block";
}
Don't worry about the form not doing anything, I will worry about that later. I just need help with the transition. Thanks!
Be sure that swithForm() is defined and replace <input type="submit" value="" onclick="switchForm()"> with <input type="button" value="" onclick="switchForm()"> otherwise it will submit your form instead of executing the onclick event. You've also to set form2 to hidden on load.
<script>
function switchForm() {
document.getElementById("form1").style.display = "none";
document.getElementById("form2").style.display = "block";
}
</script>
<!-- Username form -->
<div id="form1">
<input type="text" id="username" name="username" />
<input type="button" value="asdfs" onclick="switchForm()" />
</div>
<!-- Password form -->
<div id="form2" style="display: none;">
<form>
<input type="password" id="password" name="password" />
<input type="submit" value="aaa" onclick="#" />
</form>
Check out my working JSFiddle: http://jsfiddle.net/3UcJV/

Login Form Validation

I have this code below which validates a form. However, there is a bug in this code. When I enter something in username and leave the password blank, the form accepts it. It shouldn't be accepting it. Any idea why?
<html>
<head> <link type = "text/css" type="text/javascript" rel="stylesheet" href="css/bootstrap.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://jzaefferer.github.com/jquery-validation/jquery.validate.js"></script>
<script src="js/bootstrap.js"> </script>
<script>
$(document).ready(function() {
$('form').validate({
submitHandler: function(form) { // for demo
alert('valid form');
return false;
}
});
});</script>
</head>
<body>
<form class="well span6">
<label>Username</label>
<input type="text" id="myName" class="span3 required" placeholder="Type your username here..." /> <br/>
<label>Password</label>
<input type="text" id="myPassword" class="span3 required" placeholder="Type your password here..." /> <br/>
<input type="submit" class ="btn btn-primary">
<!-- <button class=""> Clear <br/></button><br/> -->
</form>
</body>
</html>
I'm pretty sure this validation plugin like a 'name' attribute on the field.
I've added name="myName and name="myPassword on each input and it seems to work in this jsfiddle
<form class="well span6">
<label>Username</label>
<input name="myName" type="text" id="myName" class="span3 required" placeholder="Type your username here..." /><br/>
<label>Password</label>
<input name="myPassword" type="text" id="myPassword" class="span3 required" placeholder="Type your password here..." /><br/>
<input type="submit" class="btn btn-primary">
</form>
Try to by adding the "name" attribute, to the password and username fields.

Categories