How can I Validate forms with jquery

0 votes

Thanks to some awesome people on stack overflow i was able to get my classes toggled and got my form slide up and down correctly. I'm having issues validating the form before it becomes submitted. Could someone help me with a step in the right direction? I just want the validation to check that the fields have some text in them before allowing the submit. Assignment 6

    <!-- video  https://youtu.be/XEoWYcolaEM -->

    <style>
    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;
    }
    </style>
    <script src="jquery-1.12.3.min.js" type="text/javascript"></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");

    $('button').click(function(){
        $("form").val(1);
    });
    }); // end function





            }); // end function

          </script>
    </head>

    <body>

    <!-- 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>
    </body>
    </html>

May 31, 2022 in JQuery by Edureka
• 13,670 points
270 views

1 answer to this question.

0 votes
Then to define rules use simple syntax. jQuery(document). ready(function() { jQuery("#forms). validate({ rules: { firstname: 'required', lastname: 'required', u_email: { required: true, email: true,//add an email rule that will ensure the value entered is valid email id
answered Jun 1, 2022 by Edureka
• 13,670 points

Related Questions In JQuery

0 votes
1 answer

How can I refresh a page with jQuery?

Hello @kartik, Use location.reload(): $('#something').click(function() { location.reload(); }); The reload() function ...READ MORE

answered Sep 10, 2020 in JQuery by Niroj
• 82,880 points
1,668 views
0 votes
1 answer

How can I select an element with multiple classes in jQuery?

Hello @kartik, If you want to match only ...READ MORE

answered Sep 10, 2020 in JQuery by Niroj
• 82,880 points
2,948 views
0 votes
1 answer

How can I refresh a page with jQuery?

Use the JavaScript location. reload() Method You can simply ...READ MORE

answered Jun 10, 2022 in JQuery by gaurav
• 23,260 points
633 views
0 votes
0 answers

How can I upload files asynchronously with jQuery?

I would like to upload a file ...READ MORE

Jun 10, 2022 in JQuery by gaurav
• 23,260 points
485 views
0 votes
1 answer

How can I implement my own $(document).ready functionality without using jQuery?

Hello @kartik,  There are three options: If script is the last ...READ MORE

answered Apr 28, 2020 in JQuery by Niroj
• 82,880 points
1,300 views
0 votes
1 answer

How do I pre-populate a jQuery Datepicker textbox with today's date?

Hello @kartik, You must FIRST call datepicker() > then use ...READ MORE

answered May 29, 2020 in JQuery by Niroj
• 82,880 points
11,382 views
0 votes
1 answer

How can I determine the direction of a jQuery scroll event?

Hello @kartik, Check current scrollTop vs previous scrollTop var lastScrollTop = 0; $(window).scroll(function(event){ ...READ MORE

answered Nov 24, 2020 in JQuery by Niroj
• 82,880 points
627 views
0 votes
1 answer

How can I convert a DOM element to a jQuery element?

Hello, Use this: var elm = document.createElement("div"); var jelm = ...READ MORE

answered Nov 25, 2020 in JQuery by Niroj
• 82,880 points
2,082 views
0 votes
1 answer

How can I remove an attribute with jQuery?

The removeAttr() method is an inbuilt method in jQuery ...READ MORE

answered Jun 2, 2022 in JQuery by Edureka
• 13,670 points
8,611 views
0 votes
1 answer
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP