Twitter Bootstrap Question posted in

Form validation using javascript and BootstrapDialog – Twitter bootstrap

I’m trying to do form validation by using javascript, however, I think there are some issues for the name field.

Whenever I enter any value for name field, it will automatically skip other validation and direct me to index.php.

Another scenario is after I filled in all except name field, it will it will automatically skip other validation and direct me to index.php.

Any help will be appreciated!

<!DOCTYPE html>
<html>
<head>
<!-- https://stackoverflow.com/questions/10585689/change-the-background-color-in-a-twitter-bootstrap-modal 
http://nakupanda.github.io/bootstrap3-dialog/

-->

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.7/css/bootstrap-dialog.min.css">

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link href- "css/trying.css" >

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.7/js/bootstrap-dialog.min.js"></script>



<script>

function showError(message) {

  BootstrapDialog.show({
    title: 'Attention',
    message: message,
    type: BootstrapDialog.TYPE_DANGER,
    buttons: [{
      label: 'Ok',
      cssClass: 'btn-default',
      action: function(dialog) {
        dialog.close();
      }
    }]
  });

  return false;
}



function validationFunction($msg){
    var list = document.createElement('ul');
    for(var i = 0; i < $msg.length; i++) {
         var item = document.createElement('li');
         item.appendChild(document.createTextNode($msg[i]));
         list.appendChild(item);    
    }

    showError($msg);
    return false;
}


function validateForm(form) {

    var RE_NAME = /^[A-Z a-z]+$/;
    var RE_EMAIL = /^([a-zA-Z0-9_-.]+)@([a-zA-Z0-9_-.]+).([a-zA-Z]{2,5})$/;
    var RE_PASSWORD = /^[S]{6,20}$/
    var errors = [];

    var name = form.reg_full_name.value;
    var email = form.reg_email.value;
    var password = form.reg_password.value;
    var confirmPass = form.reg_confirmpass.value;
    //Name Validation
    if (name == "") {
        errors.push("Please enter your full name");
    }
    else if (!RE_NAME.test(x)){
        errors.push( "Please enter valid  name");

    }

    //Email Validation
    if (!RE_EMAIL.test(email)){
        errors.push("Please enter a valid Email");
    }


    //Password Validation
    if (password =="" || confirmPass =="" ){
        errors.push( "Password and Comfirmation Password required");
    }

    else if (!RE_PASSWORD.test(password)){
        errors.push("Please a enter a password 6 - 20 characters in length");
    }

    else if (password!= confirmPass){
        errors.push("Your password and confirmation password do not match");
    }



    //If more than 1 error
    if (errors.length > 1) {
        validationFunction(errors);
        alert(errors);
        return false;
    }



}
</script>
</head>
<body>

<form name="myForm" action=""
onsubmit="return validateForm(this)" method="post">

Name: <input type="text" name="reg_full_name"><br><br>
Email: <input type="email" name="reg_email"><br><br>
Password: <input type="password" name="reg_password"><br><br>
Confirm Password: <input type="password" name="reg_confirmpass"><br><br>
<input type="submit" value="Submit">
</form>

</body>
</html>
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Sorry, everyone. I've found the problem. Is my careless mistake, I've accidentally typed the wrong variable at this line which causes my whole validation

    !RE_NAME.test(x)

    The problem solved.


  2. 0

    The array “errors” doesn’t get populated with the correct values.

    The correct way to do this would be:

    errors.push("Please enter your full name");

    Then your errors array gets a new entry “Please enter your full name”, which has an index of 0. The array now also has a length of 1. So you would need to adjust the block where you ask if there is more than one error to:

    if (errors.length > 1)
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search