I am a newb to js and I have prepared a form using angular JS an JQuery.The code is as follows:
<form id="frm1" onsubmit="return null()">
<table>
<tr>
<td>First Name:</td>
<td><input type="text" ng-model="fname" name="fname" required></td>
</tr>
<tr>
<td>Last Name:</td>
<td><input type="text" ng-model="Lname" required></td>
</tr>
<tr>
<td>Email ID:</td>
<td><input type="email" ng-model="mailid" required></td>
</tr>
<tr>
<td>Password:</td>
<td><input type="password" ng-model="pass" required></td><br/>
</tr>
<tr>
<td>Confirm Password:</td>
<td><input type="password" ng-model="Cpass" required></td>
</tr>
<tr>
<td>Confirm Password:</td>
<td><input type="password" ng-model="Cpass" required></td>
</tr>
<tr>
<td>Address:</td>
<td><textarea ng-model="address" required></textarea></td>
</tr>
<tr>
<td><input type="button" value="reset" onclick="formReset()"></td>
<td><input type="button" value="submit"></td>
<td><input type="button" value="Close" onclick="formClose()"></td>
</tr>
</table>
</form>
And the Script fot the above form is as follows:
<script type="text/javascript">
$(document).ready(function(){
$('a.button-submit').click(function() {
$("#magic").show();
});
});
function formReset()
{
document.getElementById("frm1").reset();
}
function formClose()
{
$("#magic").hide();
}
function null()
{
var x=document.forms["frm1"]["fname"].value;
if (x==null || x=="")
{
alert("First name must be filled out");
return false;
}
}
</script>
The Reset and the close button work absolutely fine but he problem is that the Submit button validation is not working properly. Right now I am just trying to validate the fname field and it is not working for me. I cannot figure out the exact reason for this. Can anyone please try and help me to get past this problem.
List of problems with the code.
Never name a variable or a function with a javascript keyword. In this case null
For onsubmit event to work, submit button's type should be submit not button.
You already have required field in fname field and you are still trying to validate it.
Dude, Use Validate Plugin for Validation
Example:
$(".selector").validate({
rules: {
// simple rule, converted to {required:true}
name: "required",
// compound rule
email: {
required: true,
email: true
}
}
},
messages: {
name: "Please specify your name",
email: {
required: "We need your email address to contact you",
email: "Your email address must be in the format of name#domain.com"
}
}
});
Validate Plugin
Related
I want to fill out a form when opening a page (it's a page where you edit your profile information).
Here is my code:
<head>
<script type="text/javascript">
function addValues() {
document.getElementById("datePicker").value = ViewBag.b.DateOfBirth.ToShortDateString();
document.getElementById("name").value = ViewBag.b.Username;
document.getElementById("username").value = ViewBag.b.Username;
document.getElementById("password").value = ViewBag.b.Password;
document.getElementById("lastname").value = ViewBag.b.Lastname;
}
</script>
</head>
<body onload="addValues()">
<h2>EditProfile</h2>
<form action="~/Authentication/EditProfile" method="post">
<table>
<tr>
<td>Username:</td>
<td><input type="text" name="username" id="username" /></td>
</tr>
<tr>
<td>Password:</td>
<td><input type="text" name="password" /></td>
</tr>
<tr>
<td>Name:</td>
<td><input type="text" name="name" id="name" /></td>
</tr>
<tr>
<td>Last name:</td>
<td><input type="text" name="lastname" /></td>
</tr>
<tr>
<td>Date of birth:</td>
<td><input type="date" name="dateofbirth" id="datePicker" /></td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="Save" />
</td>
</tr>
</table>
</form>
</body>
When loading a page, it doesn't fill out the information, and I can't find the mistake.
Is there a better way of doing this?
The rendered JavaScript looks like:
function addValues() {
document.getElementById("datePicker").value = 11.9.2001. 00:00:00;
document.getElementById("name").value = Mirko;
document.getElementById("username").value = micro;
document.getElementById("password").value = 123456789;
document.getElementById("lastname").value = Mijanovic;
}
You missed setting the id for some of the <input/> elements.
<head>
<script type="text/javascript">
// Example data
const ViewBag = {
b: {
DateOfBirth: '2020-09-30',
Username: 'username',
Password: 'password',
Lastname: 'lastname'
}
};
function addValues() {
document.getElementById("datePicker").value = ViewBag.b.DateOfBirth;
document.getElementById("name").value = ViewBag.b.Username;
document.getElementById("username").value = ViewBag.b.Username;
document.getElementById("password").value = ViewBag.b.Password;
document.getElementById("lastname").value = ViewBag.b.Lastname;
}
</script>
</head>
<body onload="addValues()">
<h2>EditProfile</h2>
<form action="~/Authentication/EditProfile" method="post">
<table>
<tr>
<td>Username:</td>
<td><input type="text" name="username" id="username" /></td>
</tr>
<tr>
<td>Password:</td>
<td><input type="text" name="password" id="password" /></td>
</tr>
<tr>
<td>Name:</td>
<td><input type="text" name="name" id="name" /></td>
</tr>
<tr>
<td>Last name:</td>
<td><input type="text" name="lastname" id="lastname" /></td>
</tr>
<tr>
<td>Date of birth:</td>
<td><input type="date" name="dateofbirth" id="datePicker" /></td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="Save" />
</td>
</tr>
</table>
</form>
</body>
</html>
Hope this helps,
I think the problem is a combination of things, as highlighted in a couple of comments / answers.
Add IDs to all inputs (password and lastname don't have IDs)
Ensure that ViewBag is accessed with the # prefix
Ensure that JavaScript literals are rendered appropriately
I believe the following code should handle ViewBag and JavaScript literals:
<script type="text/javascript">
function addValues() {
document.getElementById("datePicker").value = '#ViewBag.b.DateOfBirth.ToShortDateString()';
document.getElementById("name").value = '#ViewBag.b.Username';
document.getElementById("username").value = '#ViewBag.b.Username';
document.getElementById("password").value = '#ViewBag.b.Password';
document.getElementById("lastname").value = '#ViewBag.b.Lastname';
}
</script>
Note that all of the literal values are quoted. You may need to handle additional escaping to prevent any of the ViewBag properties from causing an error due to a ' in the property value.
I have used a contact form in php and added google recaptcha on it. But I can submit the form without recaptcha validation. How can I make this recaptcha as required. I have already tried some solutions, but none of them worked for me. I appreciate your answers, Thanks
<form name="contact" method="post" action="" id="fsrep-contact-form">
<table cellspacing="0" cellpadding="1" border="0">
<tr id="fname">
<td>First Name <span>*</span></td>
<td><input type="text" name="fname" required></td>
</tr>
<tr id="lname">
<td>Last Name</td>
<td><input type="text" name="lname"></td>
</tr>
<tr id="emailid">
<td>Email <span>*</span></td>
<td><input type="email" name="email" id="mail" required></td>
</tr>
<tr id="phone-no">
<td>Cell Phone <span>*</span></td>
<td><input type="number" name="phone" required></td>
</tr>
<tr>
<td>Please give us any other details you would like, that would help us to help you find your next home</td>
<td><textarea name="message"></textarea></td>
</tr>
<tr>
<td>
<div class="g-recaptcha" id="rcaptcha" name="googlecaptcha" required data-sitekey="6LffZpsUAAAAAEC_KyN4KauhSSmKdRf9SVR5aVJD" data-callback="correctCaptcha"></div>
</td>
</tr>
<tr>
<td><input type="submit" name="submit" value="SUBMIT INQUIRY" id="submit"></td>
</tr>
</table>
</form>
I have tried this one and it works for me:
You have a "data-callback" attribute
<div class="g-recaptcha" id="rcaptcha" name="googlecaptcha" required data-sitekey="YOUR KEY" **data-callback="correctCaptcha"**></div>
simply create a function with the name correctCaptcha
var recaptchachecked=false;
function correctCaptcha() {
recaptchachecked = true;
}
Then with your form you hold it til you validate if the recaptchachecked variable is true, then proceed.
<form method="post" onsubmit="return isreCaptchaChecked(event)">
..
..
</form>
function isreCaptchaChecked()
{
e.preventDefault();
return recaptchachecked;
}
I hope this helps you.
This is my form that I use to post data. All of it works just fine in terms of inputting. This is just for reference to my javascript validation form.
<form action= "<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>" method="post" name="input" id="input">
<br>
<table>
<tr>
<th>Animal Name</th>
<td><input type="text" name="ANM_NAME" id="ANM_NAME" maxlength="20"></td>
</tr>
<tr>
<th>Owner Name</th>
<td><input type="text" name="OWN_NAME" id="OWN_NAME" maxlength="20"></td>
</tr>
<tr>
<th>Sign in</th>
<td><input type="date" name="SIGN_IN" id="SIGN_IN"></td>
</tr>
<tr>
<th>Medication</th>
<td><input type="text" name="MEDS" id="MEDS" maxlength="20"></td>
</tr>
<tr>
<th>Special Requirements</th>
<td><input type="text" name="SPEC" id="SPEC" maxlength="20"></td>
</tr>
<tr>
<th>Food</th>
<td><input type="text" name="FOOD" id="FOOD" maxlength="20"></td>
</tr>
<tr>
<th>Notes</th>
<td><input type="text" name="NOTE" id="NOTE" maxlength="20"></td>
</tr>
</table>
<br>
<input type="button" id="button" value="Submit">
</form>
Currently I have this for validation, on the button click it sets the var flag to true and then checks input type text to see if they have text, if they do it submits, if not it creates pop-up alert.
<!-- Checking if inputs are entered-->
<script>
$("#button").click(function(){
var flag=true;
// check all input values
$("input[type='text']").each(function(){
if( $(this).val()=="" ){
flag=false;
}
});
// submit the form
if(flag){
$("form#input").submit()
}else{
// You should do something here.
alert("Please fill all inputs!");
}
});
</script>
But it does not work for the date as it is using a different input type. How would I add the date input to this validation?
You can select more then one type of input using a delimiter:
<script>
$("#button").click(function() {
var flag = true;
// check all input values
$("input[type='text'],input[type='date']").each(function() {
if ($(this).val() == "") {
flag = false;
}
});
// submit the form
if (flag) {
$("form#input").submit()
} else {
// You should do something here.
alert("Please fill all inputs!");
}
});
</script>
I want to do the validation to four text box using JQuery
Coding i have done
<table align="center" id="tbl-employee">
<tr>
<td>
<label>Insert Employee Details</label>
</td>
</tr>
<tr>
<td>
<label id="lbl-name">Name</label>
</td>
<td>:</td>
<td>
<input type="text" id="txt-name" />
</td>
</tr>
<tr>
<td>
<label id="lbl-salary">Salary</label>
</td>
<td>:</td>
<td><input type="text" id="txt-salary" /></td>
</tr>
<tr>
<td>
<label id="lbl-deptid">DeptId</label>
</td>
<td>:</td>
<td><select id="ddl-deptid">
<option value="0">-SelectOne-</option>
<option value="1">SoftWare</option>
<option value="2">CA</option>
<option value="3">Professor</option>
</select>
</td>
</tr>
<tr>
<td></td>
<td></td>
<td><input type="button" id="btn-insert" value="Insert" /></td>
</tr>
</table>
}
JavaScript code
$(function () {
$("#btn-insert").click(function () {
$("#tbl-employee").validate({
rules: {
Name: { required: true, minlenth: 50 },
Salary:{required:true,minlength:9},
DeptId:"required"
},
message: {
Name:{required:"Please Enter Name",minlength:"Your Name must lessthan 50 characters" }
},
submit Handler: function (table) {
table.submit();
}
});
})
})
Will anyone check my program,If i am not giving any text to the input text box ,while submitting it should display the error message.
.validate() function of jquery validation is applied for form id not for table id.
You are given .validate() to table id
The validate plugin requires ID of the form to be validated unlike the id of the table you are using now tbl-employee. Wrap your HTML inside a form and the id of this form to validate.
$("#id_of_your_form").validate({..
Also, you are not having required attribute for the input textbox. Add it to the desired textboxes and the validations will work.
Eg. <input type="text" id="txt-name" required/>
I have a simple form validation script:
<script language=”javascript”>
function return validate_form(register)
{
if (""==document.forms.register.FNAME.value){
alert("This field is required!");
document.forms.register.FNAME.focus();
return false;
}
if (""==document.forms.register.LNAME.value){
alert("This field is required!");
document.forms.register.LNAME.focus();
return false;
}
if (EMAIL.value.search( /^[a-zA-Z]+([_\.-]?[a-zA-Z0-9]+)*#[a-zA-Z0-9]+([\.-]?[a-zA-Z0-9]+)*(\.[a-zA-Z]{2,4})+$/ ) == -1){
alert(“Wrong email”);
return false;
}
if('0'==document.forms.register.GENDER.value){
alert("You must select an option!");
document.forms.register.GENDER.focus();
return false;
}
if (""==document.forms.register.ADDRESS.value){
alert("This field is required!");
document.forms.register.ADDRESS.focus();
return false;
}
if (""==document.forms.register.CONTACTNO.value){
alert("This field is required!");
document.forms.register.CONTACTNO.focus();
return false;
}
}
</script>
the function is called using the onSubmit handler, but nothing happens when submit is clicked. It goes directly to the PHP script instead of javascript 'intercepting' it. Any thoughts?
Form HTML:
<form name="register" action="register.php" method="POST" onsubmit="return validate_form(register);">
<table width="100%" border="0">
<tr>
<td width="46%" height="24" align="right">First Name:</td>
<td width="54%"><input name="FNAME" type="text" size"20" /></td>
</tr>
<tr>
<td height="24" align="right">Last Name:</td>
<td><input name="LNAME" type="text" size"20" /></td>
</tr>
<tr>
<td height="24" align="right">Email Address</td>
<td><input name="EMAIL" type="text" size"20" /></td>
</tr>
<tr>
<td height="24" align="right">Gender:</td>
<td><select name="GENDER">
<option value="" selected="selected">- Select One -</option>
<option value="Male">Male</option>
<option value="Female">Female</option></select></td>
</tr>
<tr>
<td height="24" align="right">Address:</td>
<td><input name="ADDRESS" type="text" size"20" /></td>
</tr>
<tr>
<td height="24" align="right">Contact No.:</td>
<td><input name="CONTACTNO" type="text" size"20" /></td>
</tr>
<tr>
<td height="24" align="right">Password</td>
<td><input name="PASSWORD" type="password" size"20" /></td>
</tr>
<tr>
<td height="24" align="right">Re-type Password</td>
<td><input name="PASSWORD2" type="password" size"20" /></td>
</tr>
<tr>
<td> </td>
<td><input name="submit" type="submit" value="Register" /></td>
</tr>
</table>
</form>
the alert message doesn't show? what is wrong??
Well, I refactored your code a bit to make more sense and maintainability
html change:
<form name="register" action="register.php" method="POST" onsubmit="return validate_form();">
Sample JS:
function validate_form() {
var frm = document.forms.register;
function focus_and_false(el) {
el.focus();
return false;
}
if( frm.FNAME.value === "" ) { /* repeat this for all form elements you want to validate */
alert("This field is required!");
return focus_and_false(frm.FNAME); /* this is not the best, but i'm showing you how you can reduce overall code by not rewriting the same things. */
}
return true;
}
and here is a sample
You have a HUGE syntax error in your javascript ...
function return validate_form(register)
should be
function validate_form(register)
Maybe you can start with that :)
And add an alert just after the function starts so you know that when you call it, it actually executes or at least tries to.
Another syntax error:
<script language=”javascript”>
Should be
<script type="text/javascript">
And finally i would change the function name to
function validateForm(register)
Let me know if it works :)
You got curly quotes in your code
alert(“Wrong email”); <---bad quotes
You should not just use a name
onsubmit="return validate_form(register);"
pass in this which points to the current scope which is the form element.
onsubmit="return validate_form(this);"
What is EMAIL?
EMAIL.value
Do not just reference element names.