Currently I am coding a function where a user from a website can enter a new password. The form is as follows:
<form action="php\change-password.php" method="post">
<input type="text" name="newPassword"></input>
<input type="text" name="confirmNewPassword"></input>
<button type="submit">verander wachtwoord</button>
</form>
The entries in both the input fields shouldn't be empty and they should match.
Is there an easy way to check before submitting the form if the input fields aren't empty and if they match.
I tried doing it with PHP but without any result.
You could use jQuery for this.
$('form').on('submit',function(){
if($(this).find('input[name="newPassword"]').val() != $(this).find('input[name="confirmNewPassword"]').val()){
// show error
return false;
}
});
I would strongly advice to also implement post-submit validation. Jquery validation can easily be worked around.
Related
I want to validate my form input fields on button click in jQuery. But I don't want to use client side validation. How can I add PHP server-side validation on button click?
I am using modal box for form.
I know it is a beginner's level question, but currently I am unable to figure it out because of my low expertise.
Yes you can validate using PHP and it's not a big deal. I'll provide a simple example here to pass the form data to PHP for validation.
<?php
if( isset($_POST['submitForm']) )
{
$userName = $_POST['userName'];
$userAge = $_POST['userAge'];
if ($userAge > 21)
{
echo "Hey " + userName;
}
}
?>
<html>
<body>
<form method="POST" action="">
Name: <input type="text" name="userName">
Age: <input type="number" name="userAge">
<input type="submit" name="submitForm" value="Validate">
</form>
</body>
</html>
If you wish to pass the data to another page to validate, just give the file name in action attribute, like action="Your_PHP_File.php" and validate separately. Just a tip: If you wish to redirect on success (heavily used):
header("Location: Your_URL_Here");
Anyways, this is not a better user experience. You must use client side validation using JavaScript/any JavaScript framework, and use language like PHP only to communicate with the server, such as storing the data in the database, retrieving data from the database.
I'm trying to get my form to require certain fields be filled out before the form can be submitted.
I searched and found that the command is supposed to be this simple command
<input type="text" name="name" id="name" placeholder="Name" required />
But for some reason on my form it submits it even when specified fields are not completed.
I even tried creating a brand new file in Dreamweaver with a new form with just a required input item and submit button and tried it in different browsers and it didn't work in Chrome or Safari. I copied it exactly from a YouTube video I found here with no luck http://www.youtube.com/watch?v=M73FroYgkt0
Here is my site so you can examine the code. The form is at the bottom.
http://www.YourFlyersDelivered.com
The problem with your form isn't your html, it is your javascript.
On line 33 of config.js, you have the following line:
jQuery('form .form-button-submit').click(function(e) { e.preventDefault(); jQuery(this).closest('form').submit(); });
This line is preventing the default action of your submit button, bypassing the required attribute on your input element, and submitting the form. If you remove this line, I'm sure it will work.. Examples:
Your current method of form submission: http://jsfiddle.net/Daedalus/2FY9g/ <- does not work
Without the default action prevented: http://jsfiddle.net/Daedalus/2FY9g/1/ <- works
i would use js to validate the entries
a simple validate.js file that contains something like:
function validate username(){
var user = document.getElementsByName("username")[0];
if(user.value == "") return false; }
sorry about the formatting.. im new to this forum and still getting used to it :)
Try this, add runat="server" to form......
<form id="form1" runat="server">
<input id="name" required />
<input type="submit" value="Search" />
</form>
I have a simple form
<form id="myform" action="formprocess.php" method="POST">
username:<input type="text" name="username">
password:<input type="password" name="password">
<?php if($_COOKIE("login-attempt")>"4"){
require_once "recaptchalib.php";
echo recaptcha_get_html($publickey, $error);
}?>
<input type="submit" value="Sign in" id="signIn" name="signIn""/>
</form>
the problem is that is captcha(recaptcha_response_field) is also posted to formprocess.php page, I want that this captcha(recaptcha_response_field) value should be checked here if it is right than the value of username and password should be posed to formprocess.php else reload this page with the error. how can i do this.?
Well, the easiest thing to do in my eyes would be to validate the CAPTCHA at the beginning of formprocess.php, and if it wouldn't work then die('CAPTCHA failed), otherwise run the script. I.E:
function verifyCAPTCHA(){
//function that verifies the captcha...
}
if (!verifyCaptcha()){
die('CAPTCHA Failed')
}
//the rest of your formprocess.php
But, if you insist on seperating formprocess.php from the CAPTCHA validation, then you can instead change the form action attribute to something like action='captchaValidate.php'.
captchaValidate.php would then look like:
function verifyCAPTCHA(){
//function that verifies the captcha...
}
if (!verifyCaptcha()){
die('CAPTCHA Failed')
}else{
require('formprocess.php')
}
When you say you'd like to validate the CAPTCHA 'here', perhaps you mean to say that you'd like to send an AJAX request, in which you should check out https://developers.google.com/recaptcha/docs/display and their AJAX API. You could dynamically call either one of my proposed solutions this way. Also take a look at How to do a post request for my reCaptcha ajax api?
i am designing a register form for a site.in this form in html forms we have to password type
and a submit button.
<form action="index1.php" method="post">
<b>pass:</b> <input type="password" name="pass" size="25"/>
<b>pass:</b> <input type="password" name="cpass" size="25"/>
<input type="submit" name ="submit" value="comfirm">
on of them are for pass and second for confirm password and a button for submit.
user must fill both of pass and cpass fields until program can store in database
i want that when user click on submit button (for speed up my program) my program check that if two fields are filled are no.if they have filled connect to database and store them into database or if no show a alert to user and doesn't connect to database.
my database codes are in index1.php.
if it possible i check them with javascript functions with onclick in submit?
(i could retrieve form values into a javascript functions and checked them but could not stop program and so it go to index1.php and connect to database that i don't need)
if yes how?
if no how can i do that.
if it possible in javascript me go to a particular page in php for example 5.php?
Use the onsubmit event on the form element:
<form action="..." onsubmit="return validate_fields();">
The return keyword is important here. Inside your validate_fields, return false if the check fails or true if it succeeds:
function validate_fields() {
...
if(fields_is_valid) {
return true;
}else{
alert('Fill in all fields!');
return false;
}
...
}
This will stop the form from being sent if the validation fails.
I have a basic PHP form here that sends an email when submitted:
<div id="contact">
<form id="contact_form" action="<?=base_url()?>contact/email_form" method="post" name="contact">
<h4>Questions? Comments?</h4>
<p>
<label>Name</label>
<input name="name" id="name" type="text" class="text" />
</p>
<p>
<label>Email</label>
<input name="email" id="email" type="text" class="text" />
</p>
<p class="message">
<label>Question</label>
<textarea name="message" id="message" rows="5" cols="5"></textarea>
</p>
<p class="alt">
<input value="Send Info" id="submitbutton" type="submit">
</p>
</form>
This form works well but I currently have no validation so if the form is submitted even when the fields are blank. Isn't it possible to do validation with jquery?
Once the form is submitted it POSTS to a controller file in codeigniter which does the emailing logic using an email helper in codeigniter. See here:
if($this->email->send())
{
echo 'Message has been sent';
}
else
{
show_error($this->email->print_debugger());
}
As you can see this redirects to the email_form view and echos the results. Is it possible to just stay on the same contact page that has the form and have the results of the post show there instead of redirecting to the <?=base_url()?>contact/email_form view? I was thinking of having the Text of the SUBMIT button change to "Message Sent" or something like that and then clearing the form fields. This way they stay on the contact page.
Is all of this possible with jquery? Thanks!
Yes, it is all possible.
Specifically, you would do something like this:
$( '#submitbutton' ).click(function(){
$.ajax(); //do ajax
return false; //should override default form submission
});
You would be looking for the $.post() function. However, I like to keep as much control as possible, so I use the $.ajax() function.
They both take URLs and data to process, so this would be very useful for you.
You would handle a successful return (presumably, with a particular success code to process on) in the "success:" parameter of $.ajax() or the success callback of $.post().
From inside that function, you can change the content of DOM elements (like the button in your example) using CSS selectors and jQuery functions like .html().
Here are some tutorials to get started using jQuery!
Remember, just validating the email isn't enough. You need to check other possibilities too!
In addition, make sure you are doing your validation on the server after the POST. Javascript can be turned off, and then (if you do validation on the browser) all your validation will do nothing to protect your server, or the public in general.
In summary, you can use $.post() or $.ajax() in jQuery to pass the data to your server for processing.
You should always do server validation because the user could have javascript disabled. I would validate each input for allowed values so that your application is secure and you do not turn into a spam email cannon. I would do this by adding a token to the form that ensures your application is the one that created the form and therefore it is ok to continue to the part of sending the email. See the following related post:
PHP Authenticity Tokens
I did basically this exact same thing this morning:
$('#contact_form').submit(function() {
// this is the client side check, it just checks if they are not empty
if( $(this).find('#name').val() == '' || $(this).find('#email').val() == '' || $(this).find('#message').val() == '') {
return false;
}
// post to the server
$.post('<?=base_url()?>contact/email_form'),
{name:$(this).find('#name').val(),email:$(this).find('#email').val(),message:$(this).find('#message').val()},
function(data) {
// this checks the return value from the submit
if (data == 'Message has been sent') {
// do something
$('#contact p.alt').html('Message Sent');
} else {
// the send email function returned something other than success
alert('failed');
}
}
return false;
}