How to add form validation along with alerts

Question

I am working on a simple registration form. I'm still working on form validation, but I'm not sure how to work with alerts. The idea is for the user to fill in their information, click on the "Submit" button, and a warning will appear indicating their data. How to add a warning to make this work?

HTML:

<div class="sign-up">
                <form>
                    <h2>Sign Up</h2>
                    <label>Name:</label>
                    <input type="text" placeholder="Enter your name" value="" id="suName" required>
                    <label>Email:</label>
                    <input type="email" name="email" id="suEmail" required placeholder="Enter a valid email address">
                    <label>Password:</label>
                    <input type="password" placeholder="Enter your password" name="password" id="suPassword" required>
                    <input class="submit-button su-submit" type="submit" id="mySUButton">
                </form>
            </div>

JS:

function setBindings() {

    $(".sign-up form #mySIButton").click(function (e) {
        e.preventDefault();

        var suName = $(".sign-up form #suName").val(),
            email = $(".sign-up form #suEmail").val(),
            pw = $(".sign-up form #suPassword").val(),

            alert("This is your entered information: " + suName.value + ", " + email.value + ", " + pw + ".");
    });
}


$(document).ready(function () {
    setBindings();
});

Answer 1

You have some errors due to which your code does not work. you can achieve this by simply writing the following jquery code:

 $("#mySUButton").click(function (e) {
    e.preventDefault();
    var suName = $("#suName").val();
    var email = $("#suEmail").val();
    var pw = $("#suPassword").val();
    if(suName=="" || email=="" || pw=="")
    {
        alert("All fields required");
        return false;
    }
    else if (IsEmail(email) == false)
    {
       alert("Invalid Email ID");
       return false;
    }
    alert("This is your entered information: " + suName+ ", " + email + ", " + pw + ".");
   });

function IsEmail(email) {
        var atpos = email.indexOf("@");
        var dotpos = email.lastIndexOf(".");
        if (atpos < 1 || dotpos < atpos + 2 || dotpos + 2 >= email.length) {
            return false;
        }
    }

Answer 2

.value jQuery .val()

:

var suName = $("#suName").val();
          var  email = $("#suEmail").val();
         var   pw = $("#suPassword").val();

            alert("This is your entered information: " + suName+ ", " + email+ ", " + pw + ".");

Answer 3

(, ). passsword (bcrypt, , , ), .

, , , , javascript . , ( , ), , javascript - .

Answer 4

onSubmit

function setBindings() {
        var suName = $("#suName").val();
        var email = $("#suEmail").val();
        var pw = $("#suPassword").val();
        var isValid = true;
        if(suName==""){
          alert("Name can't be empty");
          isValid = false;
        }
        if(email=="" && isValid){
          alert("Email can't be empty");
          isValid = false;
        }
        if(pw=="" && isValid){
          alert("Password can't be empty");
          isValid = false;
        }
        if(pw.length < 6  && isValid){
          alert("Password can't be less than 6 character");
          isValid = false;
        }
        return isValid;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sign-up">
                <form onSubmit="return setBindings();">
                    <h2>Sign Up</h2>
                    <label>Name:</label>
                    <input type="text" placeholder="Enter your name" value="" id="suName" >
                    <label>Email:</label>
                    <input type="email" name="email" id="suEmail"  placeholder="Enter a valid email address">
                    <label>Password:</label>
                    <input type="password" placeholder="Enter your password" name="password" id="suPassword" >
                    <input class="submit-button su-submit" type="submit" id="mySUButton">
                </form>
            </div>

I removed the HTML validation attribute requiredto validate the javascript validation.