Question

I have a form that contain a submit button. I’m using form.validation plugin

I have already set the rules. It’s ok!

But now I created a link out of form that when the user clicks, i would like to change these rules. Is it possible?

For example:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.js"></script>
<script type="text/javascript">
$().ready(function() {
    $(".myform").validate({
        rules: {
            name: {
                required: true
            },
            email: {
                required: true
            },
        }
    });
});
</script>
<form class="myform">
    Name: <input type="text" name="name">
    Email: <input type="text" name="email">
    Phone: <input type="text" name="phone">
    <input type="submit" value="Send">
</form>
<a href="#">Call me</a>

When the user clicks on “Call me”, the validation would be only the “phone” field.

Answer 1

There is lots wrong with this code both syntactically and structure

<script type="text/javascript">
$().ready(function() {
$(".myform").validate({
    rules: {
        name: {
            required: true
        },
        email: {
            required: true
        },
    }
});
});
</script>
<form class="myform">
Name: <input type="text" name="name">
Email: <input type="text" name="email">
Phone: <input type="text" name="phone">
</form>
<a href="#">Call me</a>

should look more like

<script type="text/javascript">
$(document).ready(function() {
$("#callme").click(function(){
   $(".myform").validate({
    rules: {
        phone: {
            required: true
        }
    /*note the removed ,*/
    }
});
});
$("#submit").click(function(){
$(".myform").validate({
    rules: {
        name: {
            required: true
        },
        email: {
            required: true
        }
    /*note the removed ,*/
    }
});
});
});
</script>
<!-- Your Form must have a method attribute either post or get //-->
<form class="myform" method="post" action="">
<label for="name">Name:</label> <input type="text" name="name" id="name">
<label for="email">Email:</label> <input type="text" name="email" id="email">
<label for="phone">Phone:</label> <input type="text" name="phone" id="phone">
<!-- Hide this label with css //-->
<label for="submit" class="hidden">submit:</label><input type="submit" value="submit" text="submit" id="submit" />
</form>
<!-- Link this to another form with new js validation rules //-->
<a href="#" id="callme">Call me</a>