5 Replies - 448 Views - Last Post: 21 May 2019 - 09:10 AM

#1 DanZman   User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 52
  • Joined: 24-January 18

Form Validation

Posted 12 November 2018 - 01:43 PM

I'm trying to validate a form. The name and email check seem to work. However, when the form is filled out correctly, the success message is not showing up. I'm not sure if it has anything to do with the processing of the form. Also, I'm aware that I need to do validation on the server side too. I will do that once the fron-end is working.

Thanks for you help.

 <div id="success_submit" class=" text-white">
                        <div id="message" class="card-body"></div>
                      </div>
                    <form name="myForm" method="post" action="#"  >
                      <div class="form-group">
                        <input class="form-control" type="text" name="email" placeholder="Your Email Here">
                        </div>
                        <div class="form-group">
                          <input id="name" class="form-control" type="text" name="name"placeholder="Your Name">
                          </div>
                          <div class="form-group">
                            <textarea class="form-control" type="text" >Message Here</textarea>
                            </div>
                            <button type="button" class="btn btn-success" onclick="validateForm();">Send </button>

                  </form>



Here is the JS
function validateForm() {
    var x = document.forms["myForm"]["name"].value;
    var email = document.forms["myForm"]["email"].value;
    var element = document.getElementById("success_submit");
    var message = document.getElementById("message");
    var pattern = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;

    if (x == "") {
    	alert("Name must be filled out");
    	document.getElementById('name').focus();
        return false;
    } else if (email == "" || !pattern.test(email)) {
    	alert("You have entered an invalid email!");
    	return false;
    }
    	else {
    		element.classList.add("card bg-success");
    		message.innerText = "Thank you for your question.";
    	}
}



Is This A Good Question/Topic? 0
  • +

Replies To: Form Validation

#2 ArtificialSoldier   User is offline

  • D.I.C Lover
  • member icon

Reputation: 2334
  • View blog
  • Posts: 7,113
  • Joined: 15-January 14

Re: Form Validation

Posted 12 November 2018 - 02:11 PM

Check your console for errors, you might get an error on line 17 because I don't see that element. Also, innerText might be a read-only property but I'm not sure about that.
Was This Post Helpful? 0
  • +
  • -

#3 sagar.chavada   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 16
  • Joined: 10-April 19

Re: Form Validation

Posted 20 May 2019 - 10:07 PM

file:///C:/Users/sagar.chavada/Desktop/Screenshot.png

You have define return true; at and of the else part.
Was This Post Helpful? 0
  • +
  • -

#4 andrewsw   User is online

  • never lube your breaks
  • member icon

Reputation: 6798
  • View blog
  • Posts: 28,102
  • Joined: 12-December 12

Re: Form Validation

Posted 21 May 2019 - 01:10 AM

Unless you return false the form will be submitted, refreshing the page and causing the message not to appear.

It is preferable, however, to use the submit event of the form for validation rather than a button click.
Was This Post Helpful? 0
  • +
  • -

#5 DarenR   User is offline

  • D.I.C Lover

Reputation: 617
  • View blog
  • Posts: 4,108
  • Joined: 12-January 10

Re: Form Validation

Posted 21 May 2019 - 09:05 AM

javascript fires in the exact order you code in.

so if you want the message to appear before it is posted back then you need to place it before the post method
Was This Post Helpful? 0
  • +
  • -

#6 ArtificialSoldier   User is offline

  • D.I.C Lover
  • member icon

Reputation: 2334
  • View blog
  • Posts: 7,113
  • Joined: 15-January 14

Re: Form Validation

Posted 21 May 2019 - 09:10 AM

This got kind of dredged up.
Was This Post Helpful? 1
  • +
  • -

Page 1 of 1