CODEWITHSUNDEEP
javascriptjquery
crashwap
crashwap

Reputation: 3062

js field validation - loop through object with three data considerations per field

Titling this question is a killer. Improvements welcome.

For field validation, I need three data elements per field: varname, element ID, and required(t/f).

I cannot figure out the logic, though. I am good with an associative-type object, but adding-in the required yes/no bit is more than I can figure out.

jsFiddle

HTML:

<input id="fld_1" class="input" type="text" value="bob" /><br>
<input id="fld_2" class="input" type="text" value="" /><br>
<input id="fld_3" class="input" type="text" value="pat" /><br>
<input id="mybutt" class="btn" type="button" value="Test" />

js/jQ:

objFields = {'f1':'fld_1', 'f2':'fld_2', 'f3':'fld_3'};
arrErrors = [];

$('#mybutt').click(function(){
    for (var key in objFields){
        var tmp = objFields[key];
        eval('var ' + key+ ' = $("#' +tmp+ '").val()');
        alert( key +' => '+ eval(key) );
        //IF contents required and field is empty, error and return false
    }
});

Here's the key part, though: I need to add a third datum to the assoc array (which means it will no longer be an assoc array) to indicate which fields are required. For example, suppose the 2nd field is the only one that is required to be completed. How do I add that third parameter to the object, and then use it in the validation loop?

Upvotes: 1

Views: 98

Answers (1)

Travis J
Travis J

Reputation: 82287

jsFiddle Demo

Since you went through the effort of composing the object with the identifiers, you can just use .each to iterate over that and then take the string value of key and use them in a jQuery selector. It will be much safer than using eval. Then all you need to do is trim the value from those elements and make sure they aren't empty.

edit "Add a property to the object in order to filter required elements"

In this case, I believe you are going to make the 'fld_' portion into an object itself, and with it could be an id and a requirement boolean. And then check in the iteration for the boolean value and skip when the requirement is false.

var boolish = {
 'True' : true, 'False' : false,
 'true' : true, 'false' : false,
};
var objFields = {
 'f1': { 'id' : 'fld_1', 'required' : 'True' } ,
 'f2': { 'id' : 'fld_2', 'required' : 'False' } ,
 'f3': { 'id' : 'fld_3', 'required' : 'true' }
};//often booleans from server side come back in strings
var arrErrors = [];

$('#mybutt').click(function(){
  arrErrors = [];
 //IF contents required and field is empty, error and return false
 $.each(objFields,function(_,val){
  if(!boolish[val.required])return true;//skip required = false (return true is jQuery for continue)
  if($("#"+val.id).val().trim() == "")arrErrors.push(_);
 });
 console.log(arrErrors);
});
.input{width:150px;margin:10px;background:aliceblue;}
.btn{margin:30px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="fld_1" class="input" type="text" value="bob" /><br>
<input id="fld_2" class="input" type="text" value="" /><br>
<input id="fld_3" class="input" type="text" value="pat" /><br>
<input id="mybutt" class="btn" type="button" value="Test" />

Upvotes: 2

Related Questions