Form submits with passwords not matching (JavaScript)

JavaScript
1

I have spent an embarrassing amount of time trying to get the code below to work on the app I am building. Everything seems to validate correctly except the password field. It is allowing users to register with passwords that do not match. The form submits regardless.

I am not a JavaScript wizard. I am actually trying my best to learn. I’ve made good progress thus far using previous posts on this site. Thank you for all of your contributions.

Can someone please correct the code below? I’m struggling here. I would greatly appreciate it.

	if ($.trim(Appery("register_firstname").val()) !== "") {
    if ($.trim(Appery("register_lastname").val()) !== "") {
    if (Appery("register_password1").val() == Appery("register_password2").val()) {
        if ($.trim(Appery("register_email").val()) !== "") {
            if (!document.getElementsByName("register_email")[0].checkValidity || document.getElementsByName("register_email")[0].checkValidity()) {
	if ($.trim(Appery("register_password1").val()) !== "") {		
			   document.getElementById("registrationpassword_error").innerHTML = "Please enter a password."; {
            document.getElementById("register_password1").focus();
			return false;
        }        
    }else {signupService.execute({}); 
                
            }
        }else {
                document.getElementById("registrationemail_error").innerHTML = "Email Address not valid."; {
            document.getElementById("register_email").focus();
			return false;
        }
            }
        } else {
            document.getElementById("registrationemail_error").innerHTML = "Please enter your email."; {
            document.getElementById("register_email").focus();
			return false;
        }
        	}
        } else {
            document.getElementById("registrationpassword_error").innerHTML = "Passwords do not match."; {
            document.getElementById("register_password1").focus();
			return false;
        }
           }
} else {
        document.getElementById("registrationlastname_error").innerHTML = "Please enter your last name."; {
            document.getElementById("register_lastname").focus();
        }
        //alert("Please enter your last name.");
    }
} else {
    document.getElementById("registrationfirstname_error").innerHTML = "Please enter your first name."; {
            document.getElementById("register_firstname").focus();
        }
   }
2

Yikes, that’s a lot of if/else! Looking into it now.

3

Yes it is :confused:

Thank you, Mark.

4

Here’s the approach I’d take:

function validateForm() {
  var errors = {};

  if ($("#register_firstname").val().trim()) !== "") {
    errors['register_firstname'] = "Please enter your first name."
  }

  // rest of validations go here...

  return errors;
}

// When you're ready to validate
var errors = validateForm();
console.log(errors);

Did you want to have a go to moving things into that structure, so everything isn’t so deeply nested?
Handle one validation at a time, then you can respond the errors next.

At the end the errors object might end up with something like this that you can easily work with:

var errors = {
  register_email: 'Email is not valid',
  registrationpassword_error: "Passwords don't match"
}

If you need to have multiple errors on each input you can put the messages into an array.

var errors = {
  register_email: ['Email is not valid'],
  registrationpassword_error: ["Passwords don't match", "Password needs to be at least 8 characters"]
}
5

Thank you for your response. I will review and get back you you.

6

If you’d like a quick fix you can invert the conditions, no need to nest them all. You had a few extra closing brackets and if you’re including jQuery you may as well use it.

if ($.trim($("#register_firstname").val()) == "") {
  $("#registrationfirstname_error").html("Please enter your first name.");
  $("#register_firstname").focus();
  return false;
}

if ($.trim($("#register_lastname").val()) == "") {
  $("#registrationlastname_error").html("Please enter your last name.");
  $("#register_lastname").focus();
  return false;
}

if ($("#register_password1").val() != $("#register_password2").val()) {
  $("#registrationpassword_error").html("Passwords do not match.");
  $("#register_password1").focus();
  return false;
}
if ($.trim($("#register_email").val()) == "") {
  $("#registrationemail_error").html("Email Address not valid.");
  $("#register_email").focus();
  return false;
}
if ($("#register_email")[0].checkValidity && !$("#register_email")[0].checkValidity()) {
  $("#registrationemail_error").html("Please enter your email.");
  $("#register_email").focus();
  return false;
}

if ($.trim($("#register_password1").val()) == "") {
  $("#registrationpassword_error").html("Please enter a password.");
  $("#register_password1").focus();
  return false;
}

// success 🎉
signupService.execute({});

I’m assuming this code is sitting inside something like this, where return false prevents the form from submitting:

$('#my-form').submit(function(event) {
  // ...
})
7

Hi Mark,

I went with the quick fix approach for now and ran into a snag. The firstname and lastname fields validate correctly, but the email field is not. The “Please enter your email.” message appears regardless if there is text or no text in the field. Also, the field does not clear as it should. I am using this code on Click of the Registration button in my Appery app, not sure if that matters.

Here is the exact code I am using:

$('#registrationfirstname_error').empty();
$('#registrationlastname_error').empty();
$('#registrationgender_error').empty();
$('#registrationbirthdaymonth_error').empty();
$('#registrationbirthdayday_error').empty();
$('#registrationbirthdayyear_error').empty();
$('#registrationemail_error').empty();

	
if ($.trim($("#register_firstname").val()) == "") {
  $("#registrationfirstname_error").html("Please enter your first name.");
  $("#register_firstname").focus();
  return false;
}

if ($.trim($("#register_lastname").val()) == "") {
  $("#registrationlastname_error").html("Please enter your last name.");
  $("#register_lastname").focus();
  return false;
}

if ($.trim($("#register_email").val()) == "") {
  $("#registrationemail_error").html("Please enter your email.");
  $("#register_email").focus();
  return false;
}

if ($("#register_email")[0].checkValidity && !$("#register_email")[0].checkValidity()) {
  $("#registrationemail_error").html("Email Address not valid.");
  $("#register_email").focus();
  return false;
}


if ($.trim($("#register_password1").val()) == "") {
  $("#registrationpassword_error").html("Please enter a password.");
  $("#register_password1").focus();
  return false;
}

if ($("#register_password1").val() != $("#register_password2").val()) {
  $("#registrationpassword_error").html("Passwords do not match.");
  $("#register_password1").focus();
  return false;
}

// success 🎉
signupService.execute({});
8

Yes, the checkValidity method returns false if the input is type=‘email’ and the email address is not valid. Try entering test@gmail.com and seeing if it passes.

jQuery’s empty() should clear the contents of those elements.

Can you provide a complete working example with all of the html and js?

9

Here is the HTML:

<head>
    <title>
        register
    </title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="format-detection" content="telephone=no">
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta name="msapplication-tap-highlight" content="no">
    <!-- Enable all requests, inline styles, and eval() -->
    <meta http-equiv="Content-Security-Policy" content="default-src * data:; style-src 'self' 'unsafe-inline' *; script-src 'self' 'unsafe-inline' 'unsafe-eval' *">
    <link href="../css/theme/jqm/jqm.css" rel="stylesheet" />
    <link href="../css/theme/sphere/sphere.css" rel="stylesheet" />
    <link href="../libs/jquerymobile/1.4.5/jquery.mobile.structure-1.4.5.css" rel="stylesheet"
    />
    <link type="text/css" rel="stylesheet" href="../css/sphere_css.css" />
    <script type="text/javascript" src="../libs/underscore/underscore.js">
    </script>
    <script type="text/javascript" src="../libs/store/json2.js">
    </script>
    <script type="text/javascript" src="../libs/jquery/jquery-2.1.1.js">
    </script>
    <script type="text/javascript">
                $(document).bind("mobileinit", function()
        {
            if (navigator.userAgent.toLowerCase().indexOf("android") != -1)
            {
                $.mobile.defaultPageTransition = 'none';
                $.mobile.defaultDialogTransition = 'none';
            }
            else if (navigator.userAgent.toLowerCase().indexOf("msie") != -1)
            {
                $.mobile.allowCrossDomainPages = true;
                $.support.cors = true;
            }
            else if (navigator.userAgent.match(/(iPad|iPhone|iPod)/g))
            {
                $.mobile.hashListeningEnabled = false;
            }
        });
    </script>
    <script type="text/javascript" src="../libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.js">
    </script>
    <script type="text/javascript" src="../libs/apperyio/mobilebase.js">
    </script>
    <script type="text/javascript" src="../libs/event/customEventHandler.js">
    </script>
    <script type="text/javascript" src="../libs/base/sha1.js">
    </script>
    <script type="text/javascript" src="../libs/base/oauth.js">
    </script>
    <script type="text/javascript" src="../libs/base/contexts.js">
    </script>
    <script type="text/javascript" src="../libs/base/jquery.xml2json.min.js">
    </script>
    <script type="text/javascript" src="../libs/ms_sdk_bundle/q/q.js">
    </script>
    <script type="text/javascript" src="../libs/ms_sdk_bundle/EventEmitter.js/EventEmitter.js">
    </script>
    <script type="text/javascript" src="../libs/ms_sdk_bundle/tv4/tv4.js">
    </script>
    <script type="text/javascript" src="../libs/ms_sdk_bundle/localforage/dist/localforage.js">
    </script>
    <script type="text/javascript" src="../libs/ms_sdk_bundle/localforage/plugins/localforage-setitems/localforage-setitems.js">
    </script>
    <script type="text/javascript" src="../libs/ms_sdk_bundle/localforage/plugins/localforage-find/localforage-find.js">
    </script>
    <script type="text/javascript" src="../libs/ms_sdk_bundle/crypto-js-md5/crypto-js-md5.js">
    </script>
    <script type="text/javascript" src="../libs/ms_sdk_bundle/moment/moment.js">
    </script>
    <script type="text/javascript" src="../libs/ms_sdk_bundle/underscore-query/underscore-query.min.js">
    </script>
    <script type="text/javascript" src="../libs/ms_sdk_bundle/offline/offline.js">
    </script>
    <script type="text/javascript" src="../libs/ms_sdk_bundle/client-sdk.js">
    </script>
    <script type="text/javascript" src="../libs/base/appery.js">
    </script>
    <script type="text/javascript" src="../libs/base/component-manager.js">
    </script>
    <script type="text/javascript" src="../libs/base/mapping-impl.js">
    </script>
    <script type="text/javascript" src="../libs/base/entity-api.js">
    </script>
    <script type="text/javascript" src="../libs/base/login.js">
    </script>
    <script type="text/javascript" src="../libs/base/storage-api.js">
    </script>
    <script type="text/javascript" src="../libs/get_target_platform.js">
    </script>
    <script type="text/javascript" src="../libs/cordova.js">
    </script>
    <link href="../libs/apperyio/mobilebase.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="../js/services/model.js">
    </script>
    <script type="text/javascript" src="../js/ApperyControls.js">
    </script>
    <script type="text/javascript" src="../js/services/service.js">
    </script>
    <script type="text/javascript" src="../libs/base/databaseUtils.js">
    </script>
</head>

<body>
    <script language="JavaScript" type="text/javascript">
            
    </script>
    <div data-role="page" style="min-height:480px;" dsid="register" id="register" class="type-interior"
    data-theme="a">
        <!-- mobileheader -->
        <div data-role="header" data-position="fixed" data-add-back-btn="true" data-back-btn-text="Back"
        data-theme="a" name="mobileheader" id="register_mobileheader" class="register_mobileheader">
            <h1 dsid="mobileheader">
                Register
            </h1>
        </div>
        <!-- mobilecontainer -->
        <div data-role="content" id="register_mobilecontainer" name="mobilecontainer" class="register_mobilecontainer ui-content"
        dsid="mobilecontainer" data-theme="a">
            <link href="register.css" rel="stylesheet" type="text/css" />
            <script type="text/javascript" src="register.js">
            </script>
            
           
            <form name='registration' onSubmit="return formValidation();">
            <!-- register_firstname -->
            <div id="registrationfirstname_error" class="registration_error" name="registration_error"> </div>
            <div data-role="fieldcontain" class="register_register_firstname ">
                <input type="text" name="register_firstname" dsid="register_firstname" id="register_firstname" value=""
                placeholder="First Name" tabindex="4" multiple data-theme="a"
                class="register_register_firstname" />
            </div>
           
            
            <!-- register_lastname -->
            <div id="registrationlastname_error" class="registration_error" name="registration_error"> </div>
            <div data-role="fieldcontain" class="register_register_lastname ">
                <input type="text" name="register_lastname" id="register_lastname" dsid="register_lastname" value="" placeholder="Last Name"
                id="register_register_lastname" tabindex="5" multiple data-theme="a" class="register_register_lastname"
                />
            </div>
           
            
            <!-- mobilegrid_10 -->
          	<div id="registrationgender_error" class="registration_error" name="registration_error"> </div>
            <div class="register_mobilegrid_10_wrapper" data-wrapper-for="mobilegrid_10">
                <table id="register_mobilegrid_10" class="register_mobilegrid_10" dsid="mobilegrid_10"
                name="mobilegrid_10" cellpadding=0 cellspacing=0>
                    <col style="width:auto;" />
                    <tr class="register_mobilegrid_10_row_0">
                        <!-- mobilegridcell_11 -->
                        <td id="register_mobilegridcell_11" name="mobilegridcell_11" class="register_mobilegridcell_11"
                        colspan=1 rowspan=1>
                            <div class="cell-wrapper">
                                <!-- register_gender -->
                                <div data-role="fieldcontain" class="register_register_gender " style="display: inline-block;">
                                    <select name="register_gender" id="register_register_gender" dsid="register_gender" id="register_gender"
                                    data-theme="a" data-role="appery_selectmenu" data-inline="true" data-mini="false"
                                    data-icon="carat-d" data-iconpos="right" data-native-menu="true" tabindex="7" appery-class="register_register_gender">
                                        <option id="register_register_gender-0" value="" reRender="register_gender" dsid="register_gender-0"
                                        selected="selected">
                                            Gender
                                        </option>
                                        <option id="register_register_gender-1" value="Male" reRender="register_gender"
                                        dsid="register_gender-1">
                                            Male
                                        </option>
                                        <option id="register_register_gender-2" value="Female" reRender="register_gender"
                                        dsid="register_gender-2">
                                            Female
                                        </option>
                                    </select>
                                </div>
                            </div>
                        </td>
                    </tr>
                </table>
            </div>
            <!-- mobilelabel_21 -->
            <div name="mobilelabel_21" id="register_mobilelabel_21" dsid="mobilelabel_21" data-role="appery_label"
            class="register_mobilelabel_21">
                Birthday
            </div>
            <!-- mobilegrid_22 -->
                             <div class="register_mobilegrid_22_wrapper" data-wrapper-for="mobilegrid_22">
                <table id="register_mobilegrid_22" class="register_mobilegrid_22" dsid="mobilegrid_22"
                name="mobilegrid_22" cellpadding=0 cellspacing=0>
                    <col style="width:auto;" />
                    <col style="width:auto;" />
                    <col style="width:auto;" />
                    <tr class="register_mobilegrid_22_row_0">
                        <!-- mobilegridcell_23 -->
                        <td id="register_mobilegridcell_23" name="mobilegridcell_23" class="register_mobilegridcell_23"
                        colspan=1 rowspan=1>
                            <div class="cell-wrapper">
                               
                                
                                <!-- register_birthdaymonth -->
                                <div id="registrationbirthdaymonth_error" class="registration_error" name="registration_error"> </div>
                                <div data-role="fieldcontain" class="register_register_birthdaymonth ">
                                    <input type="number" name="register_birthdaymonth" dsid="register_birthdaymonth" id="register_birthdaymonth"
                                    value="" placeholder="mm" id="register_register_birthdaymonth" maxLength="2" min="01"
                                    max="12" tabindex="12" multiple data-theme="a" class="register_register_birthdaymonth"
                                    />
                                </div>
                            </div>
                        </td>
                        <!-- mobilegridcell_24 -->
                        <div id="registrationbirthdayday_error" class="registration_error" name="registration_error"> </div>
                        <td id="register_mobilegridcell_24" name="mobilegridcell_24" class="register_mobilegridcell_24"
                        colspan=1 rowspan=1>
                            <div class="cell-wrapper">
                               
                                
                                <!-- register_birthdayday -->
                                <div data-role="fieldcontain" class="register_register_birthdayday ">
                                    <input type="number" name="register_birthdayday" dsid="register_birthdayday" id="register_birthdayday" value=""
                                    placeholder="dd" id="register_register_birthdayday" maxLength="2" min="01" max="31"
                                    tabindex="13" multiple data-theme="a" class="register_register_birthdayday" />
                                </div>
                            </div>
                        </td>
                        <!-- mobilegridcell_27 -->
                        <td id="register_mobilegridcell_27" name="mobilegridcell_27" class="register_mobilegridcell_27"
                        colspan=1 rowspan=1>
                            <div class="cell-wrapper">
                                
                                
                                <!-- register_birthdayyear -->
                                <div id="registrationbirthdayyear_error" class="registration_error" name="registration_error"> </div> 
                                <div data-role="fieldcontain" class="register_register_birthdayyear ">
                                    <input type="number" name="register_birthdayyear" dsid="register_birthdayyear" id="register_birthdayyear" value=""
                                    placeholder="yyyy" id="register_register_birthdayyear" maxLength="4" min="1900" tabindex="14"
                                    multiple data-theme="a" class="register_register_birthdayyear" />
                                </div>
                            </div>
                        </td>
                    </tr>
                </table>
            </div>
            
            
            <!-- register_email -->
            <div id="registrationemail_error" class="registration_error" name="registration_error"> </div>
            <div data-role="fieldcontain" class="register_register_email ">
                <input type="email" name="register_email" dsid="register_email" value="" placeholder="Email"
               register_email" tabindex="1" multiple data-theme="a" class="register_register_email"
                />
            </div>
            
            
            <!-- register_password1 -->
            <div id="registrationpassword_error" class="registration_error" name="registration_error"> </div>
            <div data-role="fieldcontain" class="register_register_password1 ">
                <input type="password" name="register_password1" dsid="register_password1" id="register_password1" value=""
                placeholder="Password" id="register_register_password1" tabindex="15" multiple data-theme="a"
                class="register_register_password1" />
            </div>
            <!-- register_password2 -->
            <div data-role="fieldcontain" class="register_register_password2 ">
                <input type="password" name="register_password2" dsid="register_password2" value=""
                placeholder="Confirm Password"  minLength="6" maxLength="20"
                tabindex="2" multiple data-theme="a" class="register_register_password2" />
            </div>
            <!-- register_button --><!--
            --><a data-role="button" name="register_button" dsid="register_button" class="register_register_button"
            id="register_register_button" data-corners="false" data-icon="none" data-iconpos='nowhere'
            x-apple-data-detectors="false" data-mini="false" data-theme="a" tabindex="3">
            Register
            </a>
        </div>
        </form>

          
            
            
             
    </div>
        
</body>
10

Hi there, that code doesn’t include your js in question.

11

Bingo! It is now validating correctly with exception to the email address field. Do you have any suggestions as to how I can modify the code to get the email address field validation working? I want to ensure real email addresses are being entered and accepted.

$(‘#topError’).empty();
$(‘#fnameError’).empty();
$(‘#lnameError’).empty();
$(‘#genderError’).empty();
$(‘#bdayError’).empty();
$(‘#emailError’).empty();
$(‘#pass1Error’).empty();
$(‘#pass2Error’).empty();
$(‘#passcError’).empty();

var fname = Apperyio(‘register_firstname’).val();
var lname = Apperyio(‘register_lastname’).val();
var gender = Apperyio(‘register_gender’).val();
var bmonth = Apperyio(‘register_birthdaymonth’).val();
var bday = Apperyio(‘register_birthdayday’).val();
var byear = Apperyio(‘register_birthdayyear’).val();
var email = Apperyio(‘register_email’).val();
var pass1 = Apperyio(‘register_password1’).val();
var pass2 = Apperyio(‘register_password2’).val();
var re = /^(([^<>().,;:s@“]+(.[^<>().,;:s@”]+)*)|(“.+”))@(([[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}])|(([a-zA-Z-0-9]+.)+[a-zA-Z]{2,}))$/igm;

var errorMsg = “”;

if ($.trim(fname) === “”)
{
errorMsg = errorMsg + “1”;
document.getElementById(“fnameError”).innerHTML = “Please enter your first name.”;
}

if ($.trim(lname) === “”)
{
errorMsg = errorMsg + “1”;
document.getElementById(“lnameError”).innerHTML = “Please enter your last name.”;
}

if ($.trim(gender) === “”)
{
errorMsg = errorMsg + “1”;
document.getElementById(“genderError”).innerHTML = “Please select your gender.”;
}

if ($.trim(bmonth) === “”)
{
errorMsg = errorMsg + “1”;
document.getElementById(“bdayError”).innerHTML = “Please enter your birthday.”;
}
if ($.trim(bday) === “”)
{
errorMsg = errorMsg + “1”;
document.getElementById(“bdayError”).innerHTML = “Please enter your birthday.”;
}
if ($.trim(byear) === “”)
{
errorMsg = errorMsg + “1”;
document.getElementById(“bdayError”).innerHTML = “Please enter your birthday.”;
}
if ($.trim(email) === “”)
{
errorMsg = errorMsg + “1”;
document.getElementById(“emailError”).innerHTML = “Please enter your email address.”;
}

if (email.val() === “” || !re.test(email.val()))
{
errorMsg = errorMsg + “1”;
document.getElementById(“emailError”).innerHTML = “Please enter a vaild email address.”;
}

if ($.trim(pass1.length) < 6)
{
errorMsg = errorMsg + “1”;
document.getElementById(“pass1Error”).innerHTML = “Please enter a password of at least 6 characters.”;
}
if ($.trim(pass2) === “”)
{
errorMsg = errorMsg + “1”;
document.getElementById(“passcError”).innerHTML = “Please confirm your password.”;
}
if ($.trim(pass1) !== $.trim(pass2))
{
errorMsg = errorMsg + “1”;
document.getElementById(“emailError”).innerHTML = “The passwords you entered do not match.”;
}

if (errorMsg === “”)
{
//signupService.execute({});
Apperyio.User.createUser({
“username”: Apperyio(‘register_email’).val(),
“password”: Apperyio(‘register_password1’).val(),
“email”: Apperyio(‘register_email’).val(),
“firstName”: Apperyio(‘register_firstname’).val(),
“lastName”: Apperyio(‘register_lastname’).val(),
“gender”: Apperyio(‘register_gender’).val(),
“birthday”: (Apperyio(‘register_birthdayyear’).val() + Apperyio(‘register_birthdaymonth’).val() + Apperyio(‘register_birthdayday’).val())
})
.then(function(result){
Apperyio.navigateTo(‘Position1’);
}
);
}

12

The simplest way to handle email validation is to leave it to the browser.

<input id="email-address" type="email" />

if ($('#email-address')[0].checkValidity && !$('#email-address')[0].checkValidity()) {
  // invalid email address
}

If you want to use the regex instead

if (!re.test($('#email-address').val()) {
  // invalid email address
}
2 Likes
13

It is working as expected. Thank you for all of your help. You’ve been terrific!

14

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.