Display form values in another div(display) using jquery on submit - javascript

It is an easy code. Maybe using $().html() or .text().
Since Iam new to jquery so plz an easy to understand code.
Inspite of searching on previous similar posts I am still confused.
Do I need to create another js file or I have to make changes in the existing js file.
Guys if possible plz provide a jquery code.
(function($, W, D {
var JQUERY4U = {};
JQUERY4U.UTIL = {
setupFormValidation: function() {
$("#form").validate({
rules: {
firstname: "required",
lastname: "required",
email: {
required: true,
email: true
},
bio: "required",
password: {
required: true,
minlength: 5
},
passwordcp: {
equalTo: "#password"
}
},
messages: {
firstname: "Please enter your first name",
lastname: "Please enter your last name",
password: {
required: "Please provide a password",
minlength: "Your password must be at least 5 characters long"
},
passwordcp: "Password not matching",
email: "Please enter a valid email address",
},
submitHandler: function(form) {
form.submit();
}
});
}
}
$(D).ready(function($) {
JQUERY4U.UTIL.setupFormValidation();
});
})(jQuery, window, document);
HTML
<form action="" id="form" >
<div class="formelement">
<label for="firstname">First Name</label>
<input type="text" name="firstname" id="firstname"/>
</div>
<div class="formelement">
<label for="lastname">Last Name</label>
<input type="text" name="lastname" id="lastname"/>
</div>
<div class="formelement">
<label for="email">Email-ID</label>
<input type="text" name="email"/>
</div>
<div class="formelement">
<label for="bio">BIO</label>
<textarea rows="3" cols="30" name="bio"></textarea>
</div>
<div class="formelement">
<label for="password">Password</label>
<input type="password" name="password" id="password" />
</div>
<div class="formelement">
<label for="passwordcp">Confirm-Password</label>
<input type="password" name="passwordcp" id="passwordcp" />
</div>
<div class="formelement">
<input type="submit" value="SUBMIT" class="submit"/>
</div>
</form>
<div class="display"></div>

I would just do it like this, see it in action here: http://jsfiddle.net/awsxtkd0/
$(document).ready(function() {
$("#form").validate({
rules: {
firstname: "required",
lastname: "required",
email: {
required: true,
email: true
},
bio: "required",
password: {
required: true,
minlength: 5
},
passwordcp: {
equalTo: "#password"
}
},
messages: {
firstname: "Please enter your first name",
lastname: "Please enter your last name",
password: {
required: "Please provide a password",
minlength: "Your password must be at least 5 characters long"
},
passwordcp: "Password not matching",
email: "Please enter a valid email address",
}
});
$('#form').submit(function() {
if($('#form').valid()) {
var str = '';
str += $('#firstname').val() + '<br />';
str += $('#lastname').val() + '<br />';
str += $('#email').val() + '<br />';
str += $('#bio').val() + '<br />';
$('.display').append(str);
}
return false;
});
});

Related

Validation not working using Jquery Validation plugin

I am using the jquery validation plugin for my form validation and form is inside a modal, but it is not working. Does it work with modal? or there might be a problem with my code?
Here is my javascript:
$(document).ready(function(){
// validate the comment form when it is submitted
// $("#gen_form").validate();
// validate signup form on keyup and submit
$("#gen_form").validate({
rules: {
'fname' : {
letters: true,
maxlength: 10,
minlength:2
},
'lname' : {
letters: true,
maxlength: 10,
minlength:2
},
'email': {
email: true
},
messages: {
fname: {
maxlength: "Your last name must not consist more than 40 characters"
minlength: "Your last name must consist of at least 2 characters"
},
lname: {
maxlength: "Your last name must not consist more than 40 characters"
minlength: "Your last name must consist of at least 2 characters"
},
email: "Please enter a valid email address"
}
});
});
Here is my html form (I've already added a css for error label):
<script src="{{asset('js/jquery-2.0.0.min.js')}}" type="text/javascript">
</script>
<script src="{{asset('js/form-validation.js')}}" type="text/javascript">
</script>
<script src="{{asset('js/jquery.validate.min.js')}}" type="text/javascript">
</script>
<form method="post" action="{{route('profile.update', ['id'=> Auth::id()])}}" enctype="multipart/form-data" id="gen_form">
{{csrf_field()}}
<h4 class="modal-title" id="myModalLabel"> <b>General Information</b></h4>
<div class="col-sm-6">
<div class="form-group label-floating has-success">
<label class="control-label">Last Name</label>
<input type="text" class="form-control" id="lname" name="lname" value="{{$user->lname}}" />
<br>
</div>
</div>
<div class="col-sm-6">
<div class="form-group label-floating has-success">
<label class="control-label">First Name</label>
<input type="text" class="form-control" id="fname" name="fname" value="{{$user->fname}}" />
<p class="validations">Hello</p>
</div>
</div>
<div class="col-sm-12">
<div class="form-group label-floating has-success">
<label class="control-label">Location</label>
<input type="text" class="form-control" name="location" value="{{$user->location}}" />
</div>
</div>
<h4 class="modal-title" id="myModalLabel"> <b>Contact Information</b></h4>
<div class="col-sm-6">
<div class="form-group label-floating has-success">
<label class="control-label">Contact Number</label>
<input type="text" class="form-control" id="contact_no" name="contact_no" value="{{$user->contact_no}}" />
<p class="validations">Hello</p>
</div>
</div>
<div class="col-sm-6">
<div class="form-group label-floating has-success">
<label class="control-label">Email</label>
<input type="email" class="form-control" id="email" name="email" value="{{$user->email}}" />
<p class="validations">Hello</p>
</div>
</div>
Do anyone here have an idea what is going on?
Your script is invalid.
Perhaps try
$(document).ready(function(){
// validate the comment form when it is submitted
// $("#gen_form").validate();
// validate signup form on keyup and submit
$("#gen_form").validate({
rules: {
'fname' : {
letters: true,
maxlength: 10,
minlength:2
},
'lname' : {
letters: true,
maxlength: 10,
minlength:2
},
'email': {
email: true
},
messages: {
fname: {
maxlength: "Your last name must not consist more than 40 characters",
minlength: "Your last name must consist of at least 2 characters"
},
lname: {
maxlength: "Your last name must not consist more than 40 characters",
minlength: "Your last name must consist of at least 2 characters"
},
email: "Please enter a valid email address"
}
}
});
});
and see if you have better luck?
I think, you have some syntax errors.
Try to do something like this:
$(document).ready(function(){
// validate the comment form when it is submitted
// $("#gen_form").validate();
// validate signup form on keyup and submit
$("#gen_form").validate({
rules: {
'fname' : {
letters: true,
maxlength: 10,
minlength:2
},
'lname' : {
letters: true,
maxlength: 10,
minlength:2
},
'email': {
email: true
},
},
messages: {
fname: {
maxlength: "Your last name must not consist more than 40 characters",
minlength: "Your last name must consist of at least 2 characters"
},
lname: {
maxlength: "Your last name must not consist more than 40 characters",
minlength: "Your last name must consist of at least 2 characters"
},
email: "Please enter a valid email address"
}
});
});
You are missing a closing curly bracket and a comma at the end of the rules section, right before messages:
[...]
'email': {
email: true
},
}, /* <--- This one */
messages: {
fname: {
[...]

jQuery validation doesn't work on first attempt

I have a problem, my validation start work only after click button, when i input data first time , i don't have error messages, Rest server don't save invalid data, on next input data, validator writes an error's. My code
$(document).ready(function() {
$("#register-form").validate({
rules: {
login: {
required: true,
minlength: 3,
maxlength: 15,
regexp: '^[a-zA-Z0-9_-]+$'
},
password: {
required: true,
minlength: 3,
maxlength: 15,
},
firstName: {
required: true,
minlength: 2,
maxlength: 15,
},
lastName: {
required: true,
minlength: 2,
maxlength: 15,
},
email: {
required: true,
email: true
},
birthDate: {
required: true,
regexp: '^((19|20)\\d\\d)-(0?[1-9]|1[012])-(0?[1-9]|[12][0-9]|3[01])$',
}
},
messages: {
login: {
required: "This field cannot be null",
minlength: "Login at least 3 symbols",
maxlength: "Name maximum 15 symbols",
regexp: 'Login can consist of letters, numbers, underscores(_),hyphens(-) !'
},
password: {
required: "This field cannot be null",
minlength: "Password at least 3 symbols",
maxlength: "Password maximum 15 symbols",
},
firstName: {
required: "This field cannot be null",
minlength: "Name at least 2 symbols",
maxlength: "Name maximum 15 symbols",
},
lastName: {
required: "This field cannot be null",
minlength: "Surname at least 2 symbols",
maxlength: "Surname maximum 15 symbols",
},
email: "Please enter a valid email address",
birthDate: {
required: "This field cannot be null",
regexp: "Please input date in format YYYY-MM-DD",
}
}
});
jQuery.validator.addMethod(
'regexp',
function(value, element, regexp) {
var re = new RegExp(regexp);
return this.optional(element) || re.test(value);
},
"Please check your input."
);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.0/jquery.validate.js"></script>
<form action="" id="register-form">
<div class="form-left-col">
<label>Login:</label>
<input type="text" id="login" name="login" value="" required />
<label>Password:</label>
<input type="text" id="password" name="password" value="" required/>
<label>First Name:</label>
<input type="text" id="firstName" name="firstName" value="" required/>
<label>Last Name:</label>
<input type="text" id="lastName" name="lastName" value="" required/>
<label>Email:</label>
<input type="text" id="email" name="email" value="" required/>
<label>Birthday:</label>
<input type="text" id="birthDate" name="birthDate" value="" required/>
<label>Role:</label>
<select id="role">
<option selected="selected">USER</option>
<option>ADMIN</option>
</select>
<button class="save">Save</button>
</div>
</form>

Jquery slide up function not activating in contact form script

Everything is working on this contact form except for the last bit using the slide up function to replace the contact form with a thank you message and I just can't seem to hack my way to a solution.
You fill out the form, hit submit, the email gets sent, and the loading gif appears, but the slideup animation never happens and the thank you image never shows.
<!--CONTACT PANEL-->
<div id="contact-panel">
<div class="top">: : CONTACT ME : :</div>
<form id="contactform" method="post">
<ol class="forms">
<fieldset>
<label for="name"><input type="text" name="name" id="name" value="" placeholder="Name:" required minlength="2" /></label>
</fieldset>
<p style="margin-top: -10px;"><label for="name" class="error"></label></p>
<fieldset>
<label for="email"><input type="text" name="email" id="email" value="" placeholder="Email:" required /></label>
</fieldset>
<p style="margin-top: -10px;"><label for="email" class="error"></label></p>
<fieldset>
<label for="message"><textarea name="message" id="message" placeholder="Question/Comments:" required ></textarea></label>
</fieldset>
<p style="margin-top: -5px;"><label for="message" class="error"></label></p>
<li class="buttons"><button type="submit" id="submitemail">Send Email »</button><input type="hidden" name="submitted" id="submitted" value="true" /></li>
</ol>
</form>
</div>
Here's the JS...
$(document).ready(function () {
$("#contactform").validate({
rules: {
name: {
required: true,
minlength: 2
},
email: {
required: true,
email: true
},
message: {
required: true,
minlength: 10
},
},
messages: {
name: {
required: "*Please enter your name.",
minlength: "*Your name must consist of at least 2 characters."
},
email: "*Please enter a valid email address.",
message: "*Please, say something at least 10 characters long.",
},
submitHandler: function(form) {
$('#submitemail').hide();
$("#contactform li.buttons").append('<img src="media/contact/loading.gif" alt="Loading" id="loading" />');
$.post('code/form-contact/submitcontactform.php',
$('form#contactform').serialize(),
function(data){
$("#contactform").slideUp("normal", function() {
$("#contactform").before('<img src="media/contact/contact_thankyou.png" alt="Thank You" id="thankyou" />');
});
});
},
})
return false;
});
I have tried a lot of different ways but I just don't know enough beyond guessing and trial and error. Any help would be welcomed.
I did some changes in messages json as below:
messages: {
name: {
required: "*Please enter your name.",
minlength: "*Your name must consist of at least 2 characters."
},
email:
{
email: "*Please enter a valid email address.",
required: "Please enter email address."
},
message:
{
minlength: "*Please, say something at least 10 characters long.",
required: "Please enter message"
}
},
to make it work in fiddle, I had to remove post call as jsfiddle doesn't support it:
http://jsfiddle.net/shifatullah/v3dTz/16/

jQuery.validate.js equalTo refuses to work

I am trying to validate that my one password equals the other. The system keeps flagging the passwords not equal error.
Let me post my code:
<div class="fieldWrapper">
<label for="password" id="id_password">Password: </label>
<input id="id_password" type="password" placeholder="Password" name="password" maxlength="128" class="valid">
</div>
<div class="fieldWrapper">
<label for="password_verification">Confirm:</label>
<input id="id_password_verification" type="password" placeholder="Confirm" name="password_verification" maxlength="128">
</div>
$(document).ready(function()
{
$("#signup-form").validate({
rules: {
password: {
required: true,
minlength: 5
},
password_verification: {
required : true,
equalTo: "#id_password"
}
},
messages: {
password: {
required: "Please provide a password",
minlength: "Your password must be at least 5 characters long"
},
password_verification: {
required: "Please enter your password again",
equalTo: "Please enter the same password as above"
},
},
submitHandler: function(form) {
form.submit();
}
});
});
Does anyone have any clue where I am going wrong here? Note that my form has the id signup-form.
You have dupplicate id in your HTML:
<label for="password" id="id_password">Password: </label>
remove id from the label.

jQuery validation plugin odd behavior

I'm using the jQuery validation plugin for a simple form (name, email, and phone number). Everything is working well except for the phone, which keeps a class of error despite my typing a correct phone number...
Here are the relevant pieces of code :
Form :
<form action="" method="post">
<h2>Devis gratuit</h2>
<ul id="errorHolder"></ul>
<div class="field">
<input type="text" name="name" placeholder="Nom"/>
</div>
<div class="field phone-field">
<input type="text" name="phone" placeholder="Téléphone"/>
</div>
<div class="field email-field">
<input type="text" name="email" placeholder="Email"/>
</div>
<label><input type="checkbox" name="optin"/> Recevez des offres promotionnelles</label>
<button type="submit">Envoyer</button>
</form>
And the set of rules :
rules: {
name: "required",
phone: {
required: true,
minlength: 8,
maxLength: 10,
digits: true
},
email: {
required: true,
email: true
}
}
There is an error in your code, it should be:
rules: {
name: "required",
phone: {
required: true,
minlength: 8,
maxlength: 10, //not maxLength
digits: true
},
email: {
required: true,
email: true
}
look at the docs

Categories