使用字形图标单击进行表单验证

Question

我正在尝试使用JavaScript进行表单验证。我使用铅笔图标作为我的编辑按钮和软盘图标作为我的保存图标。

这里我正在对文本框进行颜色更改，当文本框为空时颜色为红色，因此当文本框填满文本时，它应该变为灰色。我已经为此编写了代码，但问题是当文本框为空时它会变为红色，但是当文本框填满文本时它不会变成灰色。

<script>
$(document)
    .ready(
        function() {
            $('.editAddBtn')
                .click(
                    function() {
                        if ($('.editField').is(
                                '[readonly]')) { //checks if it is already on readonly mode
                            $('.editField').prop(
                                'readonly', false); //turns the readonly off
                            $('.editAddBtn')
                                .html(
                                    '<span class="glyphicon glyphicon-floppy-disk">&nbsp;</span>'); //Changes the text of the button

                        } else { //else we do other things


                            var cstreet_1 = document.getElementById('currentAddressLine1').value

                            if (cstreet_1 == "") {
                                document.getElementById('currentAddressLine1').style.borderColor = "red";
                                return false;
                            } else {
                                document.getElementById('currentAddressLine1').style.borderColor = "grey";


                            }

                            $('.editField').prop(
                                'readonly', true);
                            $('.editAddBtn')
                                .html(
                                    '<span class="glyphicon glyphicon-pencil">&nbsp;</span>');



                        }

                        if ($('.mySelect').is(
                                '[disabled]')) {
                            $('.mySelect').prop(
                                'disabled', false);
                            $('#chk').prop('disabled',
                                false);
                        } else {
                            $('.mySelect').prop(
                                'disabled', true);
                            $('#chk').prop('disabled',
                                false);
                        }
                    });

        });

</script>

Answer 1

这很好。

<script>
  $(document)
    .ready(
      function() {
        $('.editAddBtn')
          .click(
            function() {
              if ($('.editField').is(
                  '[readonly]')) { //checks if it is already on readonly mode
                $('.editField').prop(
                  'readonly', false); //turns the readonly off
                $('.editAddBtn')
                  .html(
                    '<span class="glyphicon glyphicon-floppy-disk">&nbsp;</span>'); //Changes the text of the button

              } else { //else we do other things


                var cstreet_1 = document.getElementById('currentAddressLine1').value

                if (cstreet_1 == "") {
                  document.getElementById('currentAddressLine1').style.borderColor = "red";
                  return false;
                } else {
                  document.getElementById('currentAddressLine1').style.borderColor = "grey";


                }

                $('.editField').prop(
                  'readonly', true);
                $('.editAddBtn')
                  .html(
                    '<span class="glyphicon glyphicon-pencil">&nbsp;</span>');



              }

              if ($('.mySelect').is(
                  '[disabled]')) {
                $('.mySelect').prop(
                  'disabled', false);
                $('#chk').prop('disabled',
                  false);
              } else {
                $('.mySelect').prop(
                  'disabled', true);
                $('#chk').prop('disabled',
                  false);
              }
            });

      });
</script>