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

Popular posts from this blog

php - How to display all orders for a single product showing the most recent first? Woocommerce -

asp.net - How to correctly use QUERY_STRING in ISAPI rewrite? -

angularjs - How restrict admin panel using in backend laravel and admin panel on angular? -