javascript - Split if else statements for code refactoring -
code : show 1 error message on each time.
function isvalidfields() { if (!$("#x").val()) { utilsservice.seterrorclass('x'); $scope.validationmessage.xerrormessage = true; } else if (!$("#a").val()) { utilsservice.seterrorclass('a'); $scope.validationmessage.yerrormessage = true; } else if (!$("#b").val()) { utilsservice.seterrorclass('b'); $scope.validationmessage.zgerrormessage = true; } else if (!$("#c").val()) { utilsservice.seterrorclass('c'); $scope.validationmessage.cgerrormessage = true; } else if (!$("#d").val()) { utilsservice.seterrorclass('d'); $scope.validationmessage.dgerrormessage = true; } else if (!$("#e").val()) { utilsservice.seterrorclass('e'); $scope.validationmessage.egerrormessage = true; } else if (!$("#f").val()) { utilsservice.seterrorclass('f'); $scope.validationmessage.fgerrormessage = true; } else { $scope.validationmessage = {}; return true; } }
what best possible ways of making above code more readable , avoid many if else statement , avoid code duplications.
you go this..
//mock scope let $scope = { validationmessage: { xerrormessage: null } }; //mock utilserver let utilsservice = { seterrorclass: (id) => console.log(id) } function isvalidfields() { let ids = ['x', 'a', 'b', 'c', 'd', 'e', 'f']; // find id of first element empty value let first = ids.reduce((last, curr) => { return last || ((!$("#" + curr).val()) ? curr : null) }, null); // elements had values if (!first) { $scope.validationmessage = {}; return true; } utilsservice.seterrorclass(first); $scope.validationmessage.xerrormessage = true; }
input, button { display: block; margin: 10px; padding: 10px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button onclick="isvalidfields()">try it</button> <input typ="text" id="x"> <input typ="text" id="a"> <input typ="text" id="b"> <input typ="text" id="c"> <input typ="text" id="d"> <input typ="text" id="e"> <input typ="text" id="f">
note should equivalent original code fragile based on type of values val()
returns.
Comments
Post a Comment