Suraya Suraya - 4 months ago 12
Javascript Question

jQuery Form Validation not picking up input name

I'm using the jQuery form validation plugin to validate my form. For some reason it's not picking up the names in my form and I haven't been able to figure out why. When I try to validate the code in my JS, I
am unable to reference the input elements. Here's the code and a screenshot of what's occurring. Any ideas?

enter image description here

<form id="submit-form">
<label for="app-name-form">
<input name="app-name-form" type="text" id="app-name-form"/>
<div class="label-text">App Name</div>
</label>

<label for="team-name-form">
<input type="text" id="team-name-form" name="team-name-form"/>
<div class="label-text">Team</div>
</label>

<label>
<input type="submit" class="btn" value="Submit" name="saveForm" id="saveForm"/>
</label>

</form>


<script>
$(document).ready(function(){
$("#submit-form").validate({
rules: {
app-name-form: "required"
},
messages: {
app-name-form: {
required: "Enter name pls"
}
}
});
});

$('#saveForm').click(function(e) {

});
</script>

Answer

Dashes are not legal in javascript variable names. The interpreter will not parse them correctly. Because of this you have to work around the interpreter.

Do something like:

rules: {
    "app-name-form": "required"
}

instead of your original (without the quotes):

rules: {
    app-name-form: "required"
}