There are two fields username and password and I used validate[required] class.
<input id="username" name="username" class="validate[required] text-input" placeholder="Enter your username" type="text">
<input id="password" name="password" class="validate[required] text-input" placeholder="Enter your password" type="password">
jQuery("#loginForm").validationEngine('attach', {
promptPosition: "topRight",
scroll: false
});
Now when I click on the submit button it shows its standard messages, but I want to show my custom messages. What is the best way to do this?
Not sure why it wasn't working for you. Here is a working example.
Javascript
$("#formID2").validationEngine({'custom_error_messages' : {
'#text1' : {
'required': {
'message': "Why you no give name?"
}
}
}
});
HTML
<form id="formID2">
<label for="text1">Please enter your name:</label>
<input type="text" class="validate[required]" id="text1" />
</form>
https://jsfiddle.net/pt4tjdtd/
Related
Iam working on login page of my website. Using same login page the users and admin can login to website I have given two options(checkbox) based on than the form action should cange but it is not woking properly.
The form is This
<form method="post" id="loginForm">
Username <input placeholder="email" class="form-control" name="email" id="email" type="text" required="">
Password <input placeholder="Password" id="password" class="form-control" name="password" type="password">
<input type="checkbox" id="user" checked="checked"> User
<input type="checkbox" id="adminAction"> Admin
forgot password?
<input type="submit" value="Log In">
Register Now
</form>
And this is the jquery code
<script>
if($('#adminAction').is(':checked')){
$('#loginForm').attr('action','/adminLogin');
}
else{
$('#loginForm').attr('action','/userLogin');
}
</script>
As Dante mentioned, it's probably not a great idea to toggle between form actions on the client side. But all that aside, I think your issue is that you didn't put $(document).ready in your script. Furthermore, you should probably set an initial action in your form of action='/userLogin' since there's no action when the page initially loads, and there's no trigger in your code to change anything when the checkbox gets changed. Try something like this:
<form method="post" id="loginForm">
Username <input action='/userLogin' placeholder="email" class="form-control" name="email" id="email" type="text" required="">
Password <input placeholder="Password" id="password" class="form-control" name="password" type="password">
<input type="checkbox" id="user" checked="checked"> User
<input type="checkbox" id="adminAction"> Admin
forgot password?
<input type="submit" value="Log In">
Register Now
</form>
<script>
$(document).ready(function(){
$('#adminAction').change(function(){
var checked = $('#adminAction').is(':checked');
if(checked){
$('#loginForm').attr('action','/adminLogin');
}
else{
$('#loginForm').attr('action','/userLogin');
}
})
});
</script>
I'm building a registration form modal and on button click, javascript will send an ajax request to the page regajax.php with the form content. My code is below, at the moment I'm only troubleshooting with regajax.php although the error_log still says that the variables are undefined.
Essentially, I want to send obj to regajax.php to check for errors and insert into my database on successful submission. (Before closing the modal, and without refreshing the page).
I've researched through countless stackoverflow posts and internet sources also to find an answer to my problem. Many have suggested using JSON.stringify(), which i'm currently trying to work with.
Note: In my source, the ajax script is below the form, in <body>.
$("#regButton").click(function(e) {
e.preventDefault();
var obj = {
fname: $('#fname').val(),
lname: $('#lname').val(),
email: $('#email').val(),
pass: $('#password').val(),
mobile: $('#mobile').val(),
street: $('#street').val(),
city: $('#city').val(),
post: $('#post').val(),
state: $('#state').val(),
country: $('#country').val()
}
$.ajax({
method: 'POST',
url: 'regajax.php',
dataType: 'json',
data: JSON.stringify(obj),
success: function(response) {
document.getElementById('error') = response;
}
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post">
<div>
<div class="error"></div>
<div class="modal-form-left">
<input type="text" id="fname" placeholder="First Name" required><br>
<input type="text" placeholder="Last Name" id="lname" required><br>
<input type="email" placeholder="Email" id="email" onKeyUp="checkEmail();" required value=""><br>
<input type="password" placeholder="Password" name="pass" id="password" onKeyUp='checkPass();' required pattern="(?=^.{6,}$)((?=.*\d)|(?=.*\W+))(?![.\n])(?=.*[A-Z])(?=.*[a-z]).*$"><br>
<input type="password" placeholder="Confirm Password" id="confirm_password" onKeyUp="checkPass();" required pattern="(?=^.{6,}$)((?=.*\d)|(?=.*\W+))(?![.\n])(?=.*[A-Z])(?=.*[a-z]).*$"><br>
<input type="submit" id="regButton" value="Register">
</div>
<div class="modal-form-right">
<input type="text" placeholder="Phone" id="mobile" required><br>
<input type="text" placeholder="Street" id="street" required><br>
<input type="text" placeholder="City" id="city" required><br>
<input type="text" placeholder="Post Code" id="post" name="post" required><input type="text" placeholder="State" name="state" id="state" required><br>
<input type="text" placeholder="Country" id="country" required><br>
</div>
</div>
</form>
<?php
$fname = $_POST["fname"];
error_log($fname, 3, "./error_log");
?>
I have a text field, which i check to make sure the text field is not empty before submission, which work fine.
How do I make sure that it only checks for the id="Name" text field is not empty and ignore the other text field.
<input type="text" class="form-control" id="Name" aria-label="Name" placeholder="Name" required >
<input type="text" class="form-control" id="address" aria-label="address" placeholder="address">
<input type="text" class="form-control" id="zip" aria-label="zip" placeholder="zip" >
JS
$('input:text').val().length;
Target the element by ID,
$('#Name').val().length;
Did you try this?
$('#Name').val().length;
You have set attribute required to the input with ID Name so form won't submit unless it has some value. If you want to check for whitespaces you can use jquery $.trim() method:
$('form').submit(function(e) {
var name = $('#Name').val();
if ($.trim(name) === '') {
e.preventDefault();
return false;
}
console.log('form submited!');
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input type="text" class="form-control" id="Name" aria-label="Name" placeholder="Name" required />
<input type="text" class="form-control" id="address" aria-label="address" placeholder="address" />
<input type="text" class="form-control" id="zip" aria-label="zip" placeholder="zip" />
<input type="submit" value="submit" />
</form>
I am working on a project with bootstrap modal. All I want is to show one of my modal when a form fill all the fields and press "Complete Subscription" button.
<form id="my_form">
<input type="text" name="fname" placeholder="First Name" required>
<input type="text" name="lname" placeholder="Last name" required>
<input type="text" name="company" placeholder="Company">
<input type="text" name="email" placeholder="E-mail" required>
<input class="pull-right" type="submit" name="submit" value="Complete Subscription">
</form>
I have tried this code. but it's not working.
$('#my_form').submit(function () {
$('#wellcome-modal').modal('show');
});
return false from the anonymous function to prevent the page from reloading, or call the preventDefault method on the event object it receives.
$('#my_form').submit(function (e) {
e.preventDefault();
$('#wellcome-modal').modal('show');
});
This assumes you're using Ajax to post the form.
I want to have a password field which says "Password" in it before a user enters their password (so they know what the field is)
I'd rather just use Javascript, importing jQuery for this alone seems wasteful, but I have no idea how to. The images explain quite clearly:
What it looks like:
What I want it to look like:
It's only a very simple website and the most basic of logins (has no validation etc)
Any ideas?
<input id="username" name="username" class="input_text" type="text" value="Username" />
<input id="password" name="password" class="input_text" type="password" value="Password" />
If you're using HTML5 then you should use the placeholder attribute.
<input id="username" name="username" class="input_text" type="text" placeholder="Username" />
<input id="password" name="password" class="input_text" type="password" placeholder="Password" />
If you're using HTML4 you can create a fake password field.
<script type="text/javascript">
function pwdFocus() {
$('#fakepassword').hide();
$('#password').show();
$('#password').focus();
}
function pwdBlur() {
if ($('#password').attr('value') == '') {
$('#password').hide();
$('#fakepassword').show();
}
}
</script>
<input id="username" name="username" class="input_text" type="text" v="Username" />
<input id="fakepassword" name="fakepassword" type="text" value="Password" style="color:#ccc" onfocus="pwdFocus()" />
<input id="password" name="password" class="input_text" type="password" style="display:none" onblur="pwdBlur()" />
Change your password input to be a simple input type text. Then, with JavaScript (or JQuery) on focus event, change it to be a input type password.
Here is a little untested sample with plain JavaScript (no JQUERY):
<html>
<head>
<script type="text/javascript">
function makeItPassword()
{
document.getElementById("passcontainer")
.innerHTML = "<input id=\"password\" name=\"password\" type=\"password\"/>";
document.getElementById("password").focus();
}
</script>
</head>
<body>
<form>
<span id="passcontainer">
<input onfocus="return makeItPassword()" name="password" type="text" value="Type Password" />
</span>
</form>
</body>
</html>
A simple solution:
<input id="username" name="username" class="input_text" type="text" placeholder="Username" />
<input id="password" name="password" class="input_text" type="password" placeholder="Password" />
Add the following code to your javascript:
function makePasswordHidden() {
document.getElementById("password").setAttribute("type", "password");
}
Change the input for the password to:
<input id="password" name="password" class="input_text" type="text" value="Password" onfocus="makePasswordHidden();">
What this does it it makes the input element a 'password' and the value is updated so that it is hidden. If you would like for the value="Password" to be visible if the field is left empty then add the following javascript function:
function makePasswordShown() {
document.getElementById("password").setAttrivute("type", "text");
}
And add the following to your password input:
onblur="if (this.value=='') makePasswordShown(); if (this.value=='') this.value='Password';"
I had another idea to deal with this problem and you will need no Javascript:
<input onclick="value=''; type='password';" name="password" type="text" value="Password" />
Or you can also do it like this:
<input onclick="this.value=''; this.type='password';" name="password" type="text" value="Password" />
I do not know the difference between this possibilities.
Another thing you could change is to write instead of onclick=....... onfocus=.....
I don't know the difference here, too.
But I hope I could help you. PS: Sorry because of my bad English I'm German.