Validation script jQuery

Question

I'm pretty new to jQuery, just so you know.

I'm making a site: http://stilld.nl/brrreuk/

You can see it live, it's working bit by bit. When you scroll the little car is driving. At a certain point you'll notice that you can't scroll anymore and a form will pop up. You have to answer a question before you can scroll again.

For this validation I'm thinking of using this: http://jqueryvalidation.org/documentation/

I'm trying to get it to work, but I'm stuck because of a lack of knowledge.

What I want:

When you click the button it should check if the two inputs are a specific number. So, the top one should be 3 and the bottom one should be 10. IF the inputs are correct, it should give a message like: well done!

I hope that someone can give some advice!

I'm happy to use another script, if you have a better script for me to use in this situation.

HTML:

<form id="form_1">
    <fieldset>

        <p>
        <input type="text" class="input_required" id="teller" name="teller" maxlength="2" class="valid" aria-invalid="false" onkeydown="return isNumber(event);" placeholder="?" onfocus="this.placeholder = ''" onblur="this.placeholder = '?'" required>      
        <label for="teller"> </label>

        </p>

            <hr noshade size=3>

        <p>
        <input type="text" class="input_required" id="noemer" name="noemer" maxlength="2" class="valid" aria-invalid="false" onkeydown="return isNumber(event);" placeholder="?" onfocus="this.placeholder = ''" onblur="this.placeholder = '?'" required>      
        <label for="noemer"> </label>
        </p>

        <p>
        <button class="submit" type="submit" value="controleer"> Controleer </button>
        </p>

    </fieldset>
</form>

I can make it say that their should be a number in the input fields (check out my site). But I can't get it to check if this number is the right one...

jQuery.validator.setDefaults({
  debug: true,
  success: "valid"
});
var form = $( "#form_1" );
form.validate();
$( "button" ).click(function() {
  alert( "Valid: " + form.valid() );
});

I'm very lost, so I hope you guys can help me out....Sorry for my english, i'm dutch.

dont use validotor , its like killing a fly with a tank

aelor
– aelor

2014-05-20 17:07:17 +00:00
Commented May 20, 2014 at 17:07 — aelor
– aelor, Commented May 20, 2014 at 17:07
whats a better solution?

SpaceApe
– SpaceApe

2014-05-20 17:09:07 +00:00
Commented May 20, 2014 at 17:09 — SpaceApe
– SpaceApe, Commented May 20, 2014 at 17:09

aelor · Accepted Answer · 2014-05-20 17:12:26Z

1

you can give ids to both the input fields :

<input id="first">
<input id ="second">
    <button>Click me to see the magic</button>

and then you can use the below script to do what you need, without using validator at all:

$('button').on('click', function(){
 var val1 = $("#first").val();
var val2 = $("#second").val();
                  if(val1 == 3 && val2 == 10)
                      alert("well done");
else
    alert("try again");
});

fiddle demo here : http://jsfiddle.net/7w3H7/1/

I didnt see your code , you have already given Ids to your input, you can use them.

using your code :

$('button').on('click', function(e){
    e.preventDefault();
 var val1 = $("#teller").val();
var val2 = $("#noemer").val();
                  if(val1 == 3 && val2 == 10)
                      alert("well done");
else
    alert("try again");
});

demo here : http://jsfiddle.net/7w3H7/2/

answered May 20, 2014 at 17:12

aelor

11.2k3 gold badges35 silver badges48 bronze badges

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

2 Comments

SpaceApe Over a year ago

One more thing... When the answer is correct the page refreshes or something. It shouldn't do that, because then the page scroll back to top. It should be fixed on same location. Maybe you know the answer to that also?

aelor Over a year ago

i added prevent default for that, hope you have checked it, by default the button inside the form will send a post request

Collectives™ on Stack Overflow

Validation script jQuery

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related