Beginner trying to learn about validating fields before submit in javascript

Question

Can someone please help me? I am trying to get the fields validated before submit and if fields are empty I need error message to show up. I have tried jquery but i want to learn the javascript way. I have been working on this all day! Started with trying to get the ad image to slide down then disappear/fade after clicking the exit button. Followed with another 4 hours trying to get the plus and minus icons to change and slide the login form. Now I MUST VALIDATE! please help lol

		<script>
        //Fading in Advertisent
        $(document).ready(function() {
        $("#ad").animate({
        top: '100px',
        }, (5000));
        //Closing The Advertisement
        $("#adbtn").click(function() {
        $("#ad").fadeOut(5000);
        });
        $(".plus").click(function() {
        $("form").slideToggle(1000); // half second duration
        $(this).toggleClass("plus").toggleClass(
        "minus");
        var userName = document.getElementById(
        "username").value;
        var password = document.getElementById(
        "pw").value;
        //Error Variables_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-
        var milesDrivenError = document
        .getElementById("error");
        var gallonsUsedError = document
        .getElementById("error");
        //Clear out error messages eveerytime
        milesDrivenError.firstChild.nodeValue =
        "";
        gallonsUsedError.firstChild.nodeValue =
        "";
        //**********************************************************
        // Step 3: check for valid username
        //         if (not a number),
        //         write an error message to the form 
        //         using the miles_driven_error id
        //**********************************************************
        if (isNaN(userName) || userName <=
        0) {
        milesDrivenError.firstChild
        .nodeValue =
        "Please Enter A Valid Username";
        return false;
        } //end if
        //**********************************************************
        // Step 4: check for valid gallons used
        //         if (not a number OR gallons used < 0),
        //         write an error message to the form 
        //         using the gallons_used_error id
        //**********************************************************
        if (isNaN(password) || password <=
        0) {
        gallonsUsedError.firstChild
        .nodeValue =
        "Please Enter A  Valid Password";
        return false;
        } //end if
        function formSubmit() {
        document.getElementById(
        "form").submit();
        document.getElementById(
        "error").firstChild
        .nodeValue = "";
        }
        //**********************************************************
        // Step 9: define an anonymous function for window.onload
        //         This function should assign the event handler
        //         functions for the Calculate and Clear buttons
        //**********************************************************
        
        function init() {
        document.getElementById(
        "button").onclick =
        formSubmit;
        }
        window.onload = init;
        var frm = document.querySelector(
        'form'),
        user = document.querySelector(
        '#username'),
        pwd = document.querySelector(
        '#pw'),
        err = document.querySelector(
        '#error');
        frm.addEventListener('submit',
        function(e) {
        err.textContent =
        '';
        if (user.value.trim() ===
        '') {
        err.textContent =
        'Please fill user name.';
        return false;
        }
        if (pwd.value.trim() ===
        '') {
        err.textContent =
        'Please use valid password.';
        return false;
        }
        }); // end function
        });
        }); 
        </script>

        <script>
    //Fading in Advertisent
    $(document).ready(function() {
    $("#ad").animate({
    top: '100px',
    }, (5000));
    //Closing The Advertisement
    $("#adbtn").click(function() {
    $("#ad").fadeOut(5000);
    });
    $(".plus").click(function() {
    $("form").slideToggle(1000); // half second duration
    $(this).toggleClass("plus").toggleClass(
    "minus");
    var userName = document.getElementById(
    "username").value;
    var password = document.getElementById(
    "pw").value;
    //Error Variables_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-
    var milesDrivenError = document
    .getElementById("error");
    var gallonsUsedError = document
    .getElementById("error");
    //Clear out error messages eveerytime
    milesDrivenError.firstChild.nodeValue =
    "";
    gallonsUsedError.firstChild.nodeValue =
    "";
    //**********************************************************
    // Step 3: check for valid username
    //         if (not a number),
    //         write an error message to the form 
    //         using the miles_driven_error id
    //**********************************************************
    if (isNaN(userName) || userName <=
    0) {
    milesDrivenError.firstChild
    .nodeValue =
    "Please Enter A Valid Username";
    return false;
    } //end if
    //**********************************************************
    // Step 4: check for valid gallons used
    //         if (not a number OR gallons used < 0),
    //         write an error message to the form 
    //         using the gallons_used_error id
    //**********************************************************
    if (isNaN(password) || password <=
    0) {
    gallonsUsedError.firstChild
    .nodeValue =
    "Please Enter A  Valid Password";
    return false;
    } //end if
    function formSubmit() {
    document.getElementById(
    "form").submit();
    document.getElementById(
    "error").firstChild
    .nodeValue = "";
    }
    //**********************************************************
    // Step 9: define an anonymous function for window.onload
    //         This function should assign the event handler
    //         functions for the Calculate and Clear buttons
    //**********************************************************

    function init() {
    document.getElementById(
    "button").onclick =
    formSubmit;
    }
    window.onload = init;
    var frm = document.querySelector(
    'form'),
    user = document.querySelector(
    '#username'),
    pwd = document.querySelector(
    '#pw'),
    err = document.querySelector(
    '#error');
    frm.addEventListener('submit',
    function(e) {
    err.textContent =
    '';
    if (user.value.trim() ===
    '') {
    err.textContent =
    'Please fill user name.';
    return false;
    }
    if (pwd.value.trim() ===
    '') {
    err.textContent =
    'Please use valid password.';
    return false;
    }
    }); // end function
    });
    }); 
    </script>

body {
  background-color: #fff;
  font-family: arial, sans-serif;
  font-size: 100%;
}
a {
  color: blue;
}
#welcome p strong {
  color: navy;
  font-size: 1.2em;
}
#welcome p:first-of-type {
  margin-bottom: 50px;
}
section {
  margin-bottom: 50px;
}
/* main container */

#main {
  width: 960px;
  margin: 50px auto;
  border: 2px solid #000;
  padding: 20px;
  background-color: #e0e0ff;
  position: relative;
  box-sizing: border-box;
}
/* form container */

#loginDiv {
  width: 300px;
  position: absolute;
  left: 650px;
  top: 6px;
  z-index: 100;
  border: 1px solid navy;
}
/* paragraph that shows the text "Login" which is clicked on to display/remove the form */

#login {
  margin: 0;
  cursor: pointer;
  background-color: rgb(255, 255, 255);
  padding: 5px 0 2px 30px;
}
#login:hover {
  background-color: rgb(110, 138, 195);
}
/*  plus sign icon for login form */

.plus {
  background: url(img_open.png) no-repeat 8px 7px;
  background-color: rgb(110, 138, 195);
}
/* minus sign icon for login form */

.minus {
  background: url(img_close.png) no-repeat 8px 7px;
}
/*form is hidden when the page loads */

#loginDiv form {
  padding: 10px 10px 10px 10px;
  display: none;
  background-color: rgb(255, 255, 255);
}
#loginDiv label {
  display: block;
  width: 100px;
  margin: 0 15px 0 0;
}
#loginDiv input {
  font-size: 1.2em;
  border: 1px solid navy;
}
#loginDiv input:focus {
  background-color: rgb(110, 138, 195);
  border: 2px solid navy;
}
#loginDiv input[type=button] {
  width: 100px;
}
footer {
  text-align: center;
  margin-top: 50px;
  margin-bottom: 10px;
  padding: 20px;
  border-top: 1px solid #000;
}
/* ad is not shown when the page loads  */

#ad {
  width: 300px;
  height: 300px;
  border: 1px solid #000;
  background-color: yellow;
  position: absolute;
  left: 330px;
  top: -500px;
  /* you can change this inbitially for viewing purposes only but be sure to set it back */
  box-sizing: border-box;
  background-image: url(ad.jpg);
  background-repeat: no-repeat;
}
/* close button on ad */

#adbtn {
  width: 50px;
  height: 50px;
  border: 2px solid #000;
  border-top-width: 1px;
  border-right-width: 1px;
  background-color: #fff;
  font-size: 3em;
  text-align: center;
  cursor: pointer;
  box-sizing: border-box;
  position: absolute;
  top: 0px;
  right: 0px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script href="http//ajax.aspnetcdn.com/ajax/jquery.validate/1.15.0/jquery.validate.js"></script>

<!-- main container -->
<div id="main">
  <section id="loginDiv">
    <!-- when this is clicked on the below form should be displayed and plus sign should change to minus sign-->
    <p id="login" class="plus">Login</p>
    <form>
      <p>
        <label for="username">Username:</label>
        <input type="text" name="username" id="username">
      </p>
      <p>
        <label for="pw">Password:</label>
        <input type="password" name="pw" id="pw">
      </p>
      <p>
        <input type="button" value="Submit">
      </p>

      <!-- placeholder for response if form data is correct/incorrect -->
      <p id="error"></p>
    </form>
  </section>
  <section id="welcome">
    <h1>Welcome to the Local jQuery User Group Website</h1>
    <p> <strong>Click the login button at the top of the page to login. To become a member please <a href="#">Register</a></strong> 
    </p>
    <h2>About this page layout:</h2>
    <p>The main container (parent) has 'relative' positioning so that the 'login' container can be absolutley positioned with respect to that main container. Otherwise, it would default to being absolutley positioned with respect to the window.</p>
    <p>In order for the login panel to be placed on top of the page we need to use absolute positioning, otherwise, it would move the rest of the content down as done in the FAQ assignment. Technically, absolute positioning takes that element out of the
      normal flow of the document, so that it is on top of the page. The 'ad' is also absolutely positioned to the same main container.</p>
  </section>
  <section>
    <h2>This week's agenda:</h2>
    <p>There will be a live meeting this Tuesday evening from 7:00pm to 8:00pm PST using our WebEx Conferencing Software. It will be recorded! Please note that the code samples will be available on our GitHub repository.</p>
  </section>
  <footer>Copyright &copy; Local jQuery User Group</footer>

  <!--  ad which is absolutely positioned -500px from the top so you do not see it when page loads-->
  <div id="ad">
    <div id="adbtn">X</div>
  </div>

  <!-- end main container -->
</div>

no query preferabl but seeing both solutions would greatl feed my js knowledge — BlackRoseGoat
– BlackRoseGoat, Commented May 20, 2016 at 5:55
userNameError.innerHTML = ""; instead of userNameError.firstChild.nodeValue = ""; — castletheperson
– castletheperson, Commented May 20, 2016 at 5:55
Basically how do i get the form to work correctly lol been pulling my hair at this all day — BlackRoseGoat
– BlackRoseGoat, Commented May 20, 2016 at 6:00

castletheperson · Accepted Answer · 2016-05-20 05:45:41Z

0

Easy way to try Html 5...without JS

use REQUIRED in input field

<input type="text" name="username" id="username" required>

edited May 20, 2016 at 5:45

castletheperson

33.7k11 gold badges74 silver badges111 bronze badges

answered May 20, 2016 at 5:42

Balvant Ahir

6241 gold badge9 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Balvant Ahir Over a year ago

its HTML5 Attributes

castletheperson Over a year ago

@Jai The typo is fixed now

Jai Over a year ago

@BalvantAhir check for typos, that could cost you reps. yet this doesn't answer the actual question.

BlackRoseGoat Over a year ago

I know about html5 but i just wanted to learn the javascript way

char Over a year ago

More advannce technique might be to use regex with pattern attribute.

|

Vinod Kumawat · Accepted Answer · 2016-05-20 06:11:37Z

0

you should use the validation function with the help of code write as

<script>
function validation(){
var elment1=document.getElementById('el1').value;
....... 
........// same write code above
if(EmptyVaue(elment1)){
document.getElementById('el1').innerHTML="Enter the value first ";
}
}
function EmptyVaue(val){
if(val==""){
return true;
 }
else{
return false;
}
}
/* other validation can you write same for check number email etc by function */
</script>

<form action="youe_page_url.extn" onclick="return validation()">
<div>
 Enter value<input type="text" id="el1">
 <span id="error" style="color:red"></span>
 </div>
 <input type="submit" value="submit">


  </form> `

answered May 20, 2016 at 6:11

Vinod Kumawat

7415 silver badges8 bronze badges

Comments

Jai · Accepted Answer · 2016-05-20 06:13:52Z

0

I have tried jquery but i want to learn the javascript way.

Okay!

When you're working with form and you want to validate the form then form submit event should be better choice to use with input[type="submit"] button.

var frm = document.querySelector('form'),
  user = document.querySelector('#username'),
  pwd = document.querySelector('#pw'),
  err = document.querySelector('#error');

frm.addEventListener('submit', function(e) {
  err.textContent = '';
  if (user.value.trim() === '') {
    err.textContent = 'Please fill user name.';
    return false;
  }
  if (pwd.value.trim() === '') {
    err.textContent = 'Please use valid password.';
    return false;
  }
});

<form action='#' method='post'>
  <p>
    <label for="username">Username:</label>
    <input type="text" name="username" id="username">
  </p>
  <p>
    <label for="pw">Password:</label>
    <input type="password" name="pw" id="pw">
  </p>
  <p>
    <input type="submit" value="Submit">
  </p>

  <!-- placeholder for response if form data is correct/incorrect -->
  <p id="error"></p>
</form>

answered May 20, 2016 at 6:13

Jai

74.8k12 gold badges77 silver badges104 bronze badges

3 Comments

BlackRoseGoat Over a year ago

what is "(e)"? frm.addEventListener('submit', function(e)

Jai Over a year ago

That gives you the event object which has several options like event.type, event.pageX etc. which is submit in this case. Instead of return false you can use e.preventDefault(); too.

BlackRoseGoat Over a year ago

is there a possibility of manipulating the code you just gave me to work with the original html mark up?

Collectives™ on Stack Overflow

Beginner trying to learn about validating fields before submit in javascript

3 Answers 3

6 Comments

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related