capturing the element in javascript - javascript

i would like to display the error message in the input element itself instead of showing an error message separately. how would i capture the element in which the message needs to be displayed?
this the code:
function checkForm(form) {
if (yname.getValue() == "" || yname.getValue() == "Your Name" || name.getValue() == "" || name.getValue() == "Name of the Book" || url.getValue() == "" || url.getValue() == "URL of the Book"){
[id-of-the-element].setTextValue("Field cannot be empty!");
return false;
}

You can "extend" your condition statement:
function checkForm(form) {
var result = true;
if (yname.getValue() == "" || yname.getValue() == "Your Name") {
setErrorMessage(yname);
result = false;
} else if (name.getValue() == "" || name.getValue() == "Name of the Book") {
setErrorMessage(yname);
result = false;
} else if (url.getValue() == "" || url.getValue() == "URL of the Book") {
setErrorMessage(yname);
result = false;
}
return result;
}
function setErrorMessage(field) {
field.setTextValue("Field cannot be empty!");
}

this is plain java script code if you are not using jquery
document.getElementById("id-of-the-element").value = "Field cannot be empty!";

Related

Form validation function not executing on click of anchor tag

The code below is meant to validate the first page of a form with JavaScript, before going to the next page.
But when I load the page it only alerts "Organization Name can't be blank'. And goes to the next page, without executing the rest of the function to validate the form. Pls what do I need to adjust next?
The form has 3 pages and users are meant to fill the first page with information in the required format before clicking on the Next which takes the user to page 2. Hence the form validation. The anchor tag acts as the Next button. Thanks!
Next
The form tag:
anchor tag: Next
The function :
function validateForm() {
if (orgname === null || orgname === "") {
alert("Organization Name can't be blank.");
return false;
} else if (msnstatement === null || msnstatement === "") {
alert("Mission can't be blank.");
return false;
}
else if (orgsize == null || orgsize == "") {
alert("Size can't be blank.");
return false;
}
else if (orgview == null || orgview == "") {
alert("Overview can't be blank.");
return false;
} else return true;
}
``
The return statement stops the execution of a function and returns a value.
https://www.w3schools.com/jsref/jsref_return.asp
function validateForm() {
var isValid = true
if (orgname === null || orgname === "") {
alert("Organization Name can't be blank.");
isValid = false
}
if (msnstatement === null || msnstatement === "") {
alert("Mission can't be blank.");
isValid = false;
}
if (orgsize == null || orgsize == "") {
alert("Size can't be blank.");
isValid = false;
}
if (orgview == null || orgview == "") {
alert("Overview can't be blank.");
isValid = false;
}
return isValid;
}

Validating form controls before inserting to database

I want to insert the records into the database(MySQL) but before insertion i want to validate the form fields whether they are filled by users or not, It must be validate onclick of submit button and i am inserting the records using the annotation method which is related to a java file so, when i am trying to insert the records using spring annotation method and validating the records in JavaScript it gives me the following Error:
HTTP Status 500 - Request processing failed; nested exception is java.lang.NumberFormatException: For input string: ""
My javaScript:
<script type="text/javascript">
function validateFields()
{
var c_name = document.formregisterclinic.ctl00$cphMaster$txtClinicName.value;
var p_no = document.formregisterclinic.ctl00$cphMaster$txtPhone.value;
var st_address = document.formregisterclinic.ctl00$cphMaster$txtStreetAddress.value;
var state = document.formregisterclinic.ctl00$cphMaster$txtState.value;
var city = document.formregisterclinic.ctl00$cphMaster$txtCity.value;}
var zip_code = document.formregisterclinic.ctl00$cphMaster$txtZipCode1.value;
var f_name = document.formregisterclinic.ctl00$cphMaster$txtCPFName.value;
var l_name = document.formregisterclinic.ctl00$cphMaster$txtCPLName.value;
var email = document.formregisterclinic.ctl00$cphMaster$txtEmail.value;
var cell_no = document.formregisterclinic.ctl00$cphMaster$txtCellPhone.value;
var u_name = document.formregisterclinic.ctl00$cphMaster$txtUserName.value;
var pass = document.formregisterclinic.ctl00$cphMaster$txtPassword.value;
var c_pass = document.formregisterclinic.ctl00$cphMaster$txtConfirmPassword.value;
if(c_name == "" || c_name == null)
{
alert("Clinic name can't be blank");
return false;
}
else if(p_no == "" || p_no == null)
{
alert("Phone number can't be blank");
return false;
}
else if(st_address == "" || st_address == null)
{
alert("Street address can't be blank");
return false;
}
else if(state == "" || state == null)
{
alert("State can't be blank");
return false;
}
else if(city == "" || city == null)
{
alert("City can't be blank");
return false;
}
else if(zip_code == "" || zip_code == null)
{
alert("Zip code can't be blank");
return false;
}
else if(f_name == "" || f_name == null)
{
alert("First name can't be blank");
return false;
}
else if(l_name == "" || l_name == null)
{
alert("Last name can't be blank");
return false;
}
else if(email == "" || email == null)
{
alert("Email can't be blank");
return false;
}
else if(cell_no == "" || cell_no == null)
{
alert("Cell number can't be blank");
return false;
}
else if(u_name == "" || u_name == null)
{
alert("User name can't be blank");
return false;
}
else if(pass == "" || pass == null)
{
alert("Password can't be blank");
return false;
}
else if(c_pass == "" || c_pass == null)
{
alert("Confirm password can't be blank");
return false;
}
</script>
My mapping method:
#RequestMapping(value = "/registerclinic", method = RequestMethod.POST)
public String registerclinicdbconnection(Locale locale, Model model, HttpServletRequest req, HttpServletResponse res)throws ServletException
{
String clinic_name = req.getParameter("ctl00$cphMaster$txtClinicName");
long phone_no = Long.parseLong(req.getParameter("ctl00$cphMaster$txtPhone"));
String street_add = req.getParameter("ctl00$cphMaster$txtStreetAddress");
String state = req.getParameter("ctl00$cphMaster$txtState");
String city = req.getParameter("ctl00$cphMaster$txtCity");
int zip_code = Integer.valueOf(req.getParameter("ctl00$cphMaster$txtZipCode1"));
String first_name = req.getParameter("ctl00$cphMaster$txtCPFName");
String last_name = req.getParameter("ctl00$cphMaster$txtCPLName");
String email = req.getParameter("ctl00$cphMaster$txtEmail");
long cell_phone = Long.parseLong(req.getParameter("ctl00$cphMaster$txtCellPhone"));
String user_name = req.getParameter("ctl00$cphMaster$txtUserName");
String password = req.getParameter("ctl00$cphMaster$txtPassword");
String c_password = req.getParameter("ctl00$cphMaster$txtConfirmPassword");
// Inserting records to register the clinic by making connection with database.
String queryText = "insert into registerclinic(clinicname,phone,streetadd,state,city,zipcode,firstname,lastname,email,cellphone,username,password) values('"+clinic_name+"','"+phone_no+"','"+street_add+"','"+state+"','"+city+"','"+zip_code+"','"+first_name+"','"+last_name+"','"+email+"','"+cell_phone+"','"+user_name+"','"+password+"')";
try
{
Connection con = null;
Class.forName("com.mysql.jdbc.Driver");
con = (Connection)DriverManager.getConnection("jdbc:mysql://localhost:3306/clinicmanagement","root","dipak");
Statement stat = con.createStatement();
stat.executeUpdate(queryText);
System.out.println("Record has been inserted");
stat.close();
con.close();
return "success";
}catch(Exception ea)
{
System.out.println("Exception Occured.."+ ea);
return "fail";
}
}
seems as though you don't have a return true at the end of your validateFields() method
try below:
function validateFields()
{
var c_name = document.formregisterclinic.ctl00$cphMaster$txtClinicName.value;
var p_no = document.formregisterclinic.ctl00$cphMaster$txtPhone.value;
var st_address = document.formregisterclinic.ctl00$cphMaster$txtStreetAddress.value;
var state = document.formregisterclinic.ctl00$cphMaster$txtState.value;
var city = document.formregisterclinic.ctl00$cphMaster$txtCity.value;}
var zip_code = document.formregisterclinic.ctl00$cphMaster$txtZipCode1.value;
var f_name = document.formregisterclinic.ctl00$cphMaster$txtCPFName.value;
var l_name = document.formregisterclinic.ctl00$cphMaster$txtCPLName.value;
var email = document.formregisterclinic.ctl00$cphMaster$txtEmail.value;
var cell_no = document.formregisterclinic.ctl00$cphMaster$txtCellPhone.value;
var u_name = document.formregisterclinic.ctl00$cphMaster$txtUserName.value;
var pass = document.formregisterclinic.ctl00$cphMaster$txtPassword.value;
var c_pass = document.formregisterclinic.ctl00$cphMaster$txtConfirmPassword.value;
if(c_name == "" || c_name == null)
{
alert("Clinic name can't be blank");
return false;
}
else if(p_no == "" || p_no == null)
{
alert("Phone number can't be blank");
return false;
}
else if(st_address == "" || st_address == null)
{
alert("Street address can't be blank");
return false;
}
else if(state == "" || state == null)
{
alert("State can't be blank");
return false;
}
else if(city == "" || city == null)
{
alert("City can't be blank");
return false;
}
else if(zip_code == "" || zip_code == null)
{
alert("Zip code can't be blank");
return false;
}
else if(f_name == "" || f_name == null)
{
alert("First name can't be blank");
return false;
}
else if(l_name == "" || l_name == null)
{
alert("Last name can't be blank");
return false;
}
else if(email == "" || email == null)
{
alert("Email can't be blank");
return false;
}
else if(cell_no == "" || cell_no == null)
{
alert("Cell number can't be blank");
return false;
}
else if(u_name == "" || u_name == null)
{
alert("User name can't be blank");
return false;
}
else if(pass == "" || pass == null)
{
alert("Password can't be blank");
return false;
}
else if(c_pass == "" || c_pass == null)
{
alert("Confirm password can't be blank");
return false;
}
return true;
}

validation form : how to show error message all at one time for the blank input instead of one by one?

I want to validate my form, if any of the input field is blank, the error warning will show beside the blank input field. The error message must be comes out all at one time for the blank input, not show one by one. How to do this?
Below is my javascript code :
function doValidate()
{
var x=document.forms["form"]["fullname"].value;
if (x==null || x=="")
{
document.getElementById('error1').innerHTML="Full name is required!";
return false;
}
var y=document.forms["form"]["uid"].value;
if (y==null || y=="")
{
document.getElementById('error2').innerHTML="Username is required!";
return false;
}
var z=document.forms["form"]["pwd"].value;
if (z==null || z=="")
{
document.getElementById('error3').innerHTML="Password is required!";
return false;
}
var a=document.forms["form"]["pwd2"].value;
if (a==null || a=="")
{
document.getElementById('error4').innerHTML="Please re-enter your password!";
return false;
}
var pwd = document.getElementById("pwd").value;
var pwd2 = document.getElementById("pwd2").value;
if(pwd != pwd2){
alert('Wrong confirm password!');
return false;
}
var b=document.forms["form"]["role"].value;
if (b==null || b=="Please select...")
{
document.getElementById('error5').innerHTML="Please select user role!";
return false;
}
}
You should start your function with var ok = true, and in each if-block, instead of having return false, you should set ok = false. At the end, return ok.
Here's what that might look like:
function doValidate() {
var ok = true;
var form = document.forms.form;
var fullname = form.fullname.value;
if (fullname == null || fullname == "") {
document.getElementById('error1').innerHTML = "Full name is required!";
ok = false;
}
var uid = form.uid.value;
if (uid == null || uid == "") {
document.getElementById('error2').innerHTML = "Username is required!";
ok = false;
}
var pwd = form.pwd.value;
if (pwd == null || pwd == "") {
document.getElementById('error3').innerHTML = "Password is required!";
ok = false;
}
var pwd2 = form.pwd2.value;
if (pwd2 == null || pwd2 == "") {
document.getElementById('error4').innerHTML = "Please re-enter your password!";
ok = false;
} else if (pwd != pwd2) {
document.getElementById('error4').innerHTML = "Wrong confirm password!";
ok = false;
}
var role = form.role.value;
if (role == null || role == "Please select...") {
document.getElementById('error5').innerHTML = "Please select user role!";
ok = false;
}
return ok;
}
(I've taken the liberty of changing to a more consistent formatting style, improving some variable-names, simplifying some access patterns, and replacing an alert with an inline error message like the others.)

Javascript alert on dropdown menus?

I have a javascript alert on my form here - http://investing.uglyopportunities.com/opportunity/ I have the javascript function working correctly for my form. Except I also want the javascript to alert when the user doesn't select from either of the two drop down menus. I really don't have much experience at all with javascript, so keep that in mind! Here is my current code. I really appreciate any help
<script type="text/javascript">// <![CDATA[
function validateForm() {
var a = document.forms["myform"]["inf_field_FirstName"].value;
var b = document.forms["myform"]["inf_field_Email"].value;
var c = document.forms["myform"]["inf_field_Phone1"].value;
var e = document.forms["myform"]["inf_field_City"].value;
var f = document.forms["myform"]["inf_field_State"].value;
var g = document.forms["myform"]["inf_field_PostalCode"].value;
if (a == null || a == "" || a == "First Name Here") {
alert("Please enter your First Name!");
return false;
}
if (c == null || c == '' || c == "Enter Your Phone Here" || c.length < 9) {
alert("Please insert your phone number!");
return false;
}
if (e == null || e == '' ||e == "City") {
alert("Please insert your city");
return false;
}
if (f == null || f == '' || f == "State") {
alert("Please insert your state ");
return false;
}
if (g == null || g == '' ||g == "Postal Code" || c.length < 5) {
alert("Please insert your postal code");
return false;
}
var emailRegEx = /^[A-Z0-9._%+-]+#[A-Z0-9.-]+\.[A-Z]{2,4}$/i;
if (document.myform.inf_field_Email.value.search(emailRegEx) == -1) {
alert("Please enter a valid email address.");
return false;
}
}
// ]]>
</script>
if(document.getElementById('inf_custom_LevelofInterest').value == '' || document.getElementById('inf_custom_Doyouhavemoneytoinvest').value == ''){
alert('please select ...');
return false;
}

Why is my form not validating on submit? [closed]

This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center.
Closed 10 years ago.
I have a sign up form on my page at http://business.uglyopportunities.com/affiliate-signup/ (scroll down to see the form)
Keep in mind, I am not very good with JS so this may be a simple error.
Anyways, here is the first line of my form telling it to validate:
<form accept-charset="UTF-8" action="xxxxx" class="infusion-form" method="POST" name="myform" onsubmit="return validateForm();">
and here is my validateForm javascript:
<script type="text/javascript">
function validateForm() {
var a = document.forms["myform"]["inf_field_FirstName"].value;
var b = document.forms["myform"]["inf_field_Email"].value;
var c = document.forms["myform"]["inf_field_Phone1"].value;
var d = document.forms["myform"][" inf_field_StreetAddress1"].value;
var e = document.forms["myform"][" inf_field_City"].value;
var f = document.forms["myform"][" inf_field_State"].value;
var g = document.forms["myform"][" inf_field_PostalCode"].value;
var h = document.forms["myform"][" inf_other_Username"].value;
var i = document.forms["myform"][" inf_other_Password"].value;
var j = document.forms["myform"][" inf_other_RetypePassword"].value;
if (a == null || a == "" || a == "First Name Here") {
alert("Please enter your First Name!");
return false;
}
if (c == null || c == '' || c == "Enter Your Phone Here" || c.length < 9) {
alert("Please insert your phone number!");
return false;
}
if (d == null || d == '' || d == "Street Address”) {
alert("Please insert your street address ");
return false;
}
if (e == null || e == '' ||e == "City”) {
alert("Please insert your city");
return false;
}
if (f == null || f == '' || f == "State”) {
alert("Please insert your state ");
return false;
}
if (g == null || g == '' ||g == "Postal Code”) {
alert("Please insert your postal code");
return false;
}
if (h == null || h == '' || h == "Username”) {
alert("Please insert your username ");
return false;
}
if (i == null || i == '' ||i == "password”) {
alert("Please insert your password");
return false;
}
if (j == null || j == '' || j == "password”) {
alert("Please re - type your password ! ");
return false;
}
var emailRegEx = /^[A-Z0-9._%+-]+#[A-Z0-9.-]+\.[A-Z]{2,4}$/i;
if (document.myform.inf_field_Email.value.search(emailRegEx) == -1) {
alert("Please enter a valid email address.");
return false;
}
}
</script>
and that is not working. However, when I used this code, it worked fine:
<script type="text/javascript">
function validateForm() {
var a=document.forms["myform"]["inf_field_FirstName"].value;
var b=document.forms["myform"]["inf_field_Email"].value;
var c=document.forms["myform"]["inf_field_Phone1"].value;
if (a==null || a=="" || a=="First Name Here") {
alert("Please enter your First Name!");
return false;
}
if (c==null || c==''|| c=="Enter Your Phone Here" || c.length < 9) {
alert("Please insert your phone number!");
return false;
}
var emailRegEx = /^[A-Z0-9._%+-]+#[A-Z0-9.-]+\.[A-Z]{2,4}$/i;
if (document.myform.inf_field_Email.value.search(emailRegEx) == -1) {
alert("Please enter a valid email address.");
return false;
}
}
</script>
UPDATED CODE *
<script type="text/javascript">// <![CDATA[
function validateForm() {
var a = document.forms["myform"]["inf_field_FirstName"].value;
var b = document.forms["myform"]["inf_field_Email"].value;
var c = document.forms["myform"]["inf_field_Phone1"].value;
var d = document.forms["myform"]["inf_field_StreetAddress1"].value;
var e = document.forms["myform"]["inf_field_City"].value;
var f = document.forms["myform"]["inf_field_State"].value;
var g = document.forms["myform"]["inf_field_PostalCode"].value;
var h = document.forms["myform"]["inf_other_Username"].value;
var i = document.forms["myform"]["inf_other_Password"].value;
var j = document.forms["myform"]["inf_other_RetypePassword"].value;
if (a == null || a == "" || a == "First Name Here") {
alert("Please enter your First Name!");
return false;
}
if (c == null || c == '' || c == "Enter Your Phone Here" || c.length < 9) {
alert("Please insert your phone number!");
return false;
}
if (d == null || d == '' || d == "Street Address") {
alert("Please insert your street address ");
return false;
}
if (e == null || e == '' ||e == "City") {
alert("Please insert your city");
return false;
}
if (f == null || f == '' || f == "State") {
alert("Please insert your state ");
return false;
}
if (g == null || g == '' ||g == "Postal Code") {
alert("Please insert your postal code");
return false;
}
if (h == null || h == '' || h == "Username") {
alert("Please insert your username ");
return false;
}
if (i == null || i == '' ||i == "password") {
alert("Please insert your password");
return false;
}
if (j == null || j == '' || j == "password") {
alert("Please re - type your password ! ");
return false;
}
var emailRegEx = /^[A-Z0-9._%+-]+#[A-Z0-9.-]+\.[A-Z]{2,4}$/i;
if (document.myform.inf_field_Email.value.search(emailRegEx) == -1) {
alert("Please enter a valid email address.");
return false;
}
}
// ]]>
</script>
You have a white space here:
var d = document.forms["myform"][" inf_field_StreetAddress1"].value;
// ^-----------------------
You have the same problem with for e,f,g,h,i,j
Also, you used the wrong quotes sign:
"Street Address”
// ^--------------
You did it several times.
As gdoron says, it's probably an spelling problem. You cannot begin the name of an element with a whitespace http://www.w3.org/TR/html401/types.html#type-name

Categories