Difficulties with obtaining values from form

Question

Junior Dev here. I'm trying to implement the following code in order to get all the info typed in the form and to receive an alert message ("everything is ok").

I know there is Jquery valid() function, but I have struggle with implementing it as well.So if it's possible when the textbox doesn't meet the requirements to post the error message(email needs "@", website needs "www.", name 6 letters, password="****".

Can anyone explain me with simple code how can I achieve this ?

<form id=registration_form action="" method="post">
    <table>
        <tr>
            <td>Chose Username: </td>
            <td>
                <input type="text" class="form_text" id="form_username">
            </td>
            <td>
                <span class="error_form" id="username_error_message"></span>
            </td>
        </tr>
        <tr>
            <td>Password: </td>
            <td>
                <input type="password" class="form_text" id="form_password">
            </td>
            <td>
                <span class="error_form" id="password_error_message"></span>
            </td>
        </tr>
        <tr>
            <td>Retype Password: </td>
            <td>
                <input type="password" class="form_text" id="form_retype_password">
            </td>
            <td>
                <span class="error_form" id="retype_password_error_message"></span>
            </td>
        </tr>
        <tr>
            <td>Email: </td>
            <td>
                <input type="text" class="form_text" id="form_email">
            </td>
            <td>
                <span class="error_form" id="email_error_message"></span>
            </td>
        </tr>
        <tr>
            <td></td>
            <td>
                <input type="submit" class="sbmt_btn" value="Create Account">
            </td>
            <td></td>
        </tr>
    </table>
</form>

So you just need to validate the email address for an @ space? — Master Yoda, Dec 14 '17 at 09:52
I just need to validate that every information entered is correct and if so, to get an alert('all good') — Nikola Stoilov, Dec 14 '17 at 09:52
For starters all attributes need to be wrapped in quotes, your form id isn't. To reference with jquery for example $("#form_email").val() — SPlatten, Dec 14 '17 at 09:53
Have a look at the [jQuery validation plugin](https://jqueryvalidation.org/) it can help you validate all required inputs with minimal code. No need to reinvent the wheel — Master Yoda, Dec 14 '17 at 09:54
Thank you for acknowledging me with this, I shall correct it immediately, but I doubt that would help my problem. I tried lots of, lots of different demo's, just can't validate my form correctly. — Nikola Stoilov, Dec 14 '17 at 09:55
You could use type="email", couldn't you? And then you could check for jQuery('input:invalid') to have length > or = 0 — user3154108, Dec 14 '17 at 09:57
Off topic: @SPlatten they don't *need* to be wrapped in quotes at all. More info here: https://stackoverflow.com/questions/13056683/html-attribute-with-without-quotes — freedomn-m, Dec 14 '17 at 10:05
@freedomn-m, yes they do that's the w3c syntax. https://www.w3schools.com/html/html_attributes.asp , https://mathiasbynens.be/notes/unquoted-attribute-values — SPlatten, Dec 14 '17 at 10:07
@SPlatten let me test... removes quotes from working html page... tests page... still works absolutely fine. They're needed in some scenarios but not for *all* html and not for html5 - it's worth *recommending*, but they're not required. More info: https://stackoverflow.com/questions/6495310/do-you-quote-html5-attributes — freedomn-m, Dec 14 '17 at 10:13
Depends on which browser you are using, browsers do not always follow the standard strictly, IE for example is very loose. — SPlatten, Dec 14 '17 at 10:15

Master Yoda · Answer 1 · 2017-12-14T10:51:47.777

Here is an example using the jQuery Validation Plugin. Its as simple as calling .validate(); on your form

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.17.0/dist/jquery.validate.min.js"></script>
  <script type="text/javascript">
      $("#commentForm").validate();
  </script>
</head>

It covers email, required input validation and much more. Check out the docs here.

Also, using the submitHandler option for the plugin you can set a callback on submit if all fields are correctly validated. In the example below we use this to call alert() with the message 'Everythings Ok'.

Example

$(document).ready(function() {
  $("#commentForm").validate({
    //we can use the handler to check if form is correctly validated
    submitHandler: function(form) {
      alert('Everythings Ok');
    }
  });
});

input[class="error"], textarea[class="error"] {
  border: 1px solid #f00 !important;
}

.error{
  margin: 5px;
  color: #f00 !important;
}

/* To cover your additional requirement mentioned in the comments */
body { 
 background: lightblue url(http://images.all-free-download.com/images/graphiclarge/winter_background_311052.jpg) no-repeat fixed center; 
}

/* For your additional requirement */
form {
  background-color: transparent;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.17.0/dist/jquery.validate.min.js"></script>

<form class="cmxform" id="commentForm" method="get" action="">
  <fieldset>
    <legend>Please provide your name, email address (won't be published) and a comment</legend>
    <p>
      <label for="cname">Name (required, at least 2 characters)</label>
      <input id="cname" name="name" minlength="2" type="text" required>
    </p>
    <p>
      <label for="cemail">E-Mail (required)</label>
      <input id="cemail" type="email" name="email" required>
    </p>
    <p>
      <label for="curl">URL (optional)</label>
      <input id="curl" type="url" name="url">
    </p>
    <p>
      <label for="ccomment">Your comment (required)</label>
      <textarea id="ccomment" name="comment" required></textarea>
    </p>
    <p>
      <input class="submit" type="submit" value="Submit">
    </p>
  </fieldset>
</form>

Doing this with jQuery would require a lot of different validation techniques most likely including other libraries like Regex. The plugin aggregates all of them into one plugin that can be reused across multiple pages.

Thank you very much for this detailed code explanation. As I have done everything as you've written and checked the docs as well, I'm currently unavailable of receiving the error messages at all. Any tips of what might have gone wrong ? — Nikola Stoilov, Dec 14 '17 at 10:09
@NikolaStoilov Sure, you can call it wherever you want so long as its wrapped in a `$(document).ready()` function and enclosed in ` — Master Yoda, Dec 14 '17 at 10:11
Thanks again, but I'm currently doing it as a hobby. So correct me if I'm wrong but: In the i put the — Nikola Stoilov, Dec 14 '17 at 10:16
The general conception is that it should be in the `` tags enclosed within ` — Master Yoda, Dec 14 '17 at 10:22
I'm trying as well to make a transparent background colour underneath the form so there could be contrast between the text and the background-image of when I apply to the css: `form { background-color: white; opacity: 0.3; }` When i do that, it makes the inputs and text to opacity 0.3 as well. Any Idea ? :/ — Nikola Stoilov, Dec 14 '17 at 10:39
@NikolaStoilov Try: `form { background-color: transparent; }` Example has been updated — Master Yoda, Dec 14 '17 at 10:52
I actually achieved it with giving an rgba property with 0.3 opacity --> `rgba(63,191,191,0.3);` Thank you once again ! — Nikola Stoilov, Dec 14 '17 at 10:59

Difficulties with obtaining values from form

1 Answers1

Example