So I've this form on which I'm trying to apply simple form validation and everything is working fine except I want to display an alert message if a user leaves the empty field or if a form has successfully submitted. But the problem is I am having this purple line below my form which I want to hide before the form submission.

/*simple form validation script*/
var formData = document.forms.myForm;
var show = document.getElementById("alert");

formData.onsubmit = function() {

  if (formData.name.value == "") {
    show.innerHTML = "Please fill out all fields!";
    return false;
  } else {
    $("#alert").css("display", "block");
    show.innerHTML = "successful submission of form!";
    return true;
  }
};

#alert {
  margin: 30px auto;
  background: purple;
  color: #fff;
  border: 1px solid transparent;
  padding: 0px 20px;
  width: 30%;
  font-size: 20px;
  border-radius: 2px;
  -webkit-transition: background 2s ease;
  -moz-transition: background 2s ease;
  -ms-transition: background 2s ease;
  -o-transition: background 2s ease;
  transition: background 2s ease;
}

<!--simple form validation with javascript example-->
<form name="myForm" action="#">
  <label>Name:</label>
  <input type="text" name="name">
  <label>Password:</label>
  <input type="password" name="pass" placeholder="Password">
  <input type="submit" name="submit" value="submit">
  <!--alert-->
  <div id="alert"></div>
</form>

<script src="formValidation.js" type="text/javascript"></script>

So I've this form on which I'm trying to apply simple form validation and everything is working fine except I want to display an alert message if a user leaves the empty field or if a form has successfully submitted. But the problem is I am having this purple line below my form which I want to hide before the form submission.

/*simple form validation script*/
var formData = document.forms.myForm;
var show = document.getElementById("alert");

formData.onsubmit = function() {

  if (formData.name.value == "") {
    show.innerHTML = "Please fill out all fields!";
    return false;
  } else {
    $("#alert").css("display", "block");
    show.innerHTML = "successful submission of form!";
    return true;
  }
};

#alert {
  margin: 30px auto;
  background: purple;
  color: #fff;
  border: 1px solid transparent;
  padding: 0px 20px;
  width: 30%;
  font-size: 20px;
  border-radius: 2px;
  -webkit-transition: background 2s ease;
  -moz-transition: background 2s ease;
  -ms-transition: background 2s ease;
  -o-transition: background 2s ease;
  transition: background 2s ease;
}

<!--simple form validation with javascript example-->
<form name="myForm" action="#">
  <label>Name:</label>
  <input type="text" name="name">
  <label>Password:</label>
  <input type="password" name="pass" placeholder="Password">
  <input type="submit" name="submit" value="submit">
  <!--alert-->
  <div id="alert"></div>
</form>

<script src="formValidation.js" type="text/javascript"></script>

Please help me or at least clear this logic. Thank you!

• javascript
• jquery
• html
• css
• forms

Share Improve this question Follow asked Oct 16, 2016 at 13:01 Aisha SalmanAisha Salman 77644 gold badges1313 silver badges2222 bronze badges 7

• Why are you mixing up both jQuery and JavaScript. Use one, it is easier. – Praveen Kumar Purushothaman Commented Oct 16, 2016 at 13:03
• 1 Set #alert to display:none; by default – Jacob G Commented Oct 16, 2016 at 13:04
• 1 submitting form reloads page. – charlietfl Commented Oct 16, 2016 at 13:06
• 1 as of what i understood you want to hide the alert div when form loads for first time...so you have to set its display property default to hide(display:none) and that should solve the problem....and in validation show it in both cases.. – RohitS Commented Oct 16, 2016 at 13:10
• 1 in your case you can use preventDefault() to avoid default form submit behavior as you are submitting the form to itself on successful form submit it causing the form reload and result is you are not getting success message.. – RohitS Commented Oct 16, 2016 at 13:17

 |  Show 2 more ments

4 Answers 4

Sorted by: Reset to default 3

The problem with this code you have is, you are submitting it normally, which means, the page gets navigated to another page, where you see the POST results. Here, the new page is loaded and all your old JavaScript is discarded.

For showing an #alert with CSS, you need to be in the same page, so using AJAX is the best way. This is the reason, you aren't seeing the output, while it navigates to a new page, even before the JavaScript executes.

Also adding the below code at the top, will help you hiding the alert box (which now displays as a thin line) before it gets displayed:

$("#alert").hide();

Note: Why are you mixing up both jQuery and JavaScript. Use one, it is easier.

Update: Hiding the purple thin line code:

/*simple form validation script*/
$(function () {
  $("#alert").hide();
  $("form").submit(function() {
    if (this.name.value == "") {
      $("#alert").text("Please fill out all fields!").show();
    } else {
      $("#alert").text("Successful submission of form!").show();
      $.post($(this).attr("action"), $(this).serialize(), function () {
        $("#alert").text("Successful submission of form!").show();
      });
    }
    return false;
  });
});

#alert {
  margin: 30px auto;
  background: purple;
  color: #fff;
  border: 1px solid transparent;
  padding: 0px 20px;
  width: 30%;
  font-size: 20px;
  border-radius: 2px;
  -webkit-transition: background 2s ease;
  -moz-transition: background 2s ease;
  -ms-transition: background 2s ease;
  -o-transition: background 2s ease;
  transition: background 2s ease;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!--simple form validation with javascript example-->
<form name="myForm" action="#">
  <label>Name:</label>
  <input type="text" name="name">
  <label>Password:</label>
  <input type="password" name="pass" placeholder="Password">
  <input type="submit" name="submit" value="submit">
  <!--alert-->
  <div id="alert"></div>
</form>

<script src="formValidation.js" type="text/javascript"></script>

Hope this clears.

Set #alert to display:none; by default

    #alert {
      display:none;
    }

JS:

show.style.display="block";

Try removing border attribute from this code:

  #alert {
  margin: 30px auto;
  background: purple;
  color: #fff;
  border: 1px solid transparent;
  padding: 0px 20px;
  width: 30%;
  font-size: 20px;
  border-radius: 2px;
  -webkit-transition: background 2s ease;
  -moz-transition: background 2s ease;
  -ms-transition: background 2s ease;
  -o-transition: background 2s ease;
  transition: background 2s ease;
}

You can try giving border using .css property in js as below:

$("#alert").css('border','1px solid transparent');

You can try below code. I have tested it, its working..
<style> #alert { margin: 30px auto; background: purple; color: #fff; padding: 0px 20px; width: 30%; font-size: 20px; border-radius: 2px; -webkit-transition: background 2s ease; -moz-transition: background 2s ease; -ms-transition: background 2s ease; -o-transition: background 2s ease; transition: background 2s ease; } </style>

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!--simple form validation with javascript example--> <form name="myForm" action="#"> <label>Name:</label> <input type="text" name="name"> <label>Password:</label> <input type="password" name="pass" placeholder="Password"> <input type="submit" name="submit" value="submit"> <!--alert--> <div id="alert"></div> </form> <!-- end snippet -->

<script> /*simple form validation script*/ $(function () { $("#alert").hide(); $("form").submit(function() { if (this.name.value == "") { $("#alert").text("Please fill out all fields!").show(); } else { $("#alert").text("Successful submission of form!").show(); $.post($(this).attr("action"), $(this).serialize(), function () { $("#alert").text("Successful submission of form!").show(); }); } return false; }); });
$("#alert").css('border','1px solid transparent'); </script>