Commit 6ce95321b10656aad7ee76db5f2c05a91027617d
1 parent
1cf18a2c
Exists in
master
Fixes on submit sign form
Showing
4 changed files
with
72 additions
and
36 deletions
Show diff stats
view/css/main.css
view/css/submit-sign.css
view/js/submit-sign.js
| ... | ... | @@ -2,8 +2,7 @@ |
| 2 | 2 | |
| 3 | 3 | var submitUrl = ''; |
| 4 | 4 | var loggedUser = ''; |
| 5 | - var MIN_PHRASES_LENGTH = 3; | |
| 6 | - var MAX_PHRASES_LENGTH = 20; | |
| 5 | + var MAX_CHAR_LENGTH = 255; | |
| 7 | 6 | |
| 8 | 7 | function _isEmpty(str) { |
| 9 | 8 | return (!str || 0 === str.length); |
| ... | ... | @@ -28,21 +27,17 @@ |
| 28 | 27 | } |
| 29 | 28 | } |
| 30 | 29 | |
| 31 | - function _areValidPhrases(phrases) { | |
| 32 | - var cleanPhrases = phrases.replace(/[.,\/#!$%\^&\*;:{}=\-_`~()]/g, ""); | |
| 33 | - var splitPhrasesLength = cleanPhrases.trim().split(/\s+/g).length; | |
| 34 | - return splitPhrasesLength >= MIN_PHRASES_LENGTH | |
| 35 | - && splitPhrasesLength <= MAX_PHRASES_LENGTH; | |
| 30 | + function _arePhrasesValid(phrases) { | |
| 31 | + return phrases.length <= MAX_CHAR_LENGTH; | |
| 36 | 32 | } |
| 37 | 33 | |
| 38 | 34 | function _alertPhrase() { |
| 39 | 35 | $('#upload-warning-msg').hide(); |
| 40 | 36 | var phrases = $('#input-phrases').val(); |
| 41 | - if (!_areValidPhrases(phrases)) { | |
| 37 | + if (!_arePhrasesValid(phrases)) { | |
| 42 | 38 | $('#upload-warning-msg').html( |
| 43 | - 'As frases de exemplo devem possuir no minímo ' | |
| 44 | - + MIN_PHRASES_LENGTH + ' e no máximo ' | |
| 45 | - + MAX_PHRASES_LENGTH + ' palavras.'); | |
| 39 | + 'As frases de exemplo devem possuir no máximo ' | |
| 40 | + + MAX_CHAR_LENGTH + ' caracteres.'); | |
| 46 | 41 | $('#upload-warning-msg').show(); |
| 47 | 42 | } |
| 48 | 43 | } |
| ... | ... | @@ -56,16 +51,6 @@ |
| 56 | 51 | } |
| 57 | 52 | } |
| 58 | 53 | |
| 59 | - function _alertCity() { | |
| 60 | - $('#upload-warning-msg').hide(); | |
| 61 | - var city = $('#input-city').val(); | |
| 62 | - if (_isEmpty(city)) { | |
| 63 | - $('#upload-warning-msg').html( | |
| 64 | - 'Por favor indique o nome da sua cidade.'); | |
| 65 | - $('#upload-warning-msg').show(); | |
| 66 | - } | |
| 67 | - } | |
| 68 | - | |
| 69 | 54 | function _alertSignUpload() { |
| 70 | 55 | $('#upload-warning-msg').hide(); |
| 71 | 56 | var signUpload = $('#input-sign-upload').val(); |
| ... | ... | @@ -76,16 +61,24 @@ |
| 76 | 61 | } |
| 77 | 62 | } |
| 78 | 63 | |
| 64 | + function _getNationalRadioCheckedValue() { | |
| 65 | + return $(".wl-national-sign-radio:checked").attr("value"); | |
| 66 | + } | |
| 67 | + | |
| 68 | + function _isValidState(state) { | |
| 69 | + var value = _getNationalRadioCheckedValue(); | |
| 70 | + return value === 'no' && state != '' || value === 'yes'; | |
| 71 | + } | |
| 72 | + | |
| 79 | 73 | function _validadeAllFields() { |
| 80 | 74 | var signName = $('#input-sign-name').val(); |
| 81 | 75 | var wordClass = $('#input-word-class').val(); |
| 82 | 76 | var phrases = $('#input-phrases').val(); |
| 83 | 77 | var state = $('#input-state').val(); |
| 84 | - var city = $('#input-city').val(); | |
| 85 | 78 | var signUpload = $('#input-sign-upload').val(); |
| 86 | 79 | return !_isEmpty(signName) && !_isEmpty(wordClass) |
| 87 | - && _areValidPhrases(phrases) && !_isEmpty(state) | |
| 88 | - && !_isEmpty(city) && !_isEmpty(signUpload); | |
| 80 | + && _arePhrasesValid(phrases) && !_isEmpty(signUpload) | |
| 81 | + && _isValidState(state); | |
| 89 | 82 | } |
| 90 | 83 | |
| 91 | 84 | function _updateSubmitButton() { |
| ... | ... | @@ -169,16 +162,34 @@ |
| 169 | 162 | _alertPhrase(); |
| 170 | 163 | _updateSubmitButton(); |
| 171 | 164 | }); |
| 172 | - $('#input-state').on('input', function() { | |
| 173 | - _alertState(); | |
| 165 | + $('#input-sign-upload').on('change', function() { | |
| 166 | + _alertSignUpload(); | |
| 174 | 167 | _updateSubmitButton(); |
| 175 | 168 | }); |
| 176 | - $('#input-city').on('input', function() { | |
| 177 | - _alertCity(); | |
| 169 | + | |
| 170 | + $('#input-state').on('input', function() { | |
| 171 | + var value = $(this).val(); | |
| 172 | + if (value === 'Nacional') { | |
| 173 | + $('.wl-national-sign-radio[value=yes]').trigger("click"); | |
| 174 | + } else { | |
| 175 | + _alertState(); | |
| 176 | + } | |
| 177 | + | |
| 178 | 178 | _updateSubmitButton(); |
| 179 | 179 | }); |
| 180 | - $('#input-sign-upload').on('change', function() { | |
| 181 | - _alertSignUpload(); | |
| 180 | + $('.wl-national-sign-radio').on('click', function() { | |
| 181 | + var value = $(this).attr("value"); | |
| 182 | + if (value === 'no') { | |
| 183 | + $("#input-state-container").show(); | |
| 184 | + $("#input-city-container").show(); | |
| 185 | + $("#input-state").val(''); | |
| 186 | + } else { | |
| 187 | + $("#input-state-container").hide(); | |
| 188 | + $("#input-city-container").hide(); | |
| 189 | + $("#input-state").val('Nacional'); | |
| 190 | + $("#input-city").val(''); | |
| 191 | + } | |
| 192 | + | |
| 182 | 193 | _updateSubmitButton(); |
| 183 | 194 | }); |
| 184 | 195 | } | ... | ... |
view/templates/submit-sign/submit-sign.html
| ... | ... | @@ -43,14 +43,26 @@ |
| 43 | 43 | </div> |
| 44 | 44 | </div> |
| 45 | 45 | <div class="form-group"> |
| 46 | - <label class="control-label col-sm-3">Frases de exemplo:</label> | |
| 46 | + <label class="control-label col-sm-3">Frases de exemplo (opcional):</label> | |
| 47 | 47 | <div class="col-sm-5"> |
| 48 | 48 | <textarea id="input-phrases" name="frases" class="form-control" |
| 49 | - rows="2"> | |
| 50 | - </textarea> | |
| 49 | + rows="2"></textarea> | |
| 51 | 50 | </div> |
| 52 | 51 | </div> |
| 53 | 52 | <div class="form-group"> |
| 53 | + <label class="control-label col-sm-3">O sinal é nacional?</label> | |
| 54 | + <div class="col-sm-5"> | |
| 55 | + <label class="radio-inline"> | |
| 56 | + <input type="radio" name="wl-national-sign-radio" | |
| 57 | + class="wl-national-sign-radio" value="yes">Sim | |
| 58 | + </label> | |
| 59 | + <label class="radio-inline"> | |
| 60 | + <input type="radio" name="wl-national-sign-radio" | |
| 61 | + class="wl-national-sign-radio" value="no">Não | |
| 62 | + </label> | |
| 63 | + </div> | |
| 64 | + </div> | |
| 65 | + <div id="input-state-container" class="form-group"> | |
| 54 | 66 | <label class="control-label col-sm-3">Estado:</label> |
| 55 | 67 | <div class="col-sm-5"> |
| 56 | 68 | <select id="input-state" name="estado" class="form-control"> |
| ... | ... | @@ -82,11 +94,12 @@ |
| 82 | 94 | <option value="São Paulo">São Paulo</option> |
| 83 | 95 | <option value="Sergipe">Sergipe</option> |
| 84 | 96 | <option value="Tocantins">Tocantins</option> |
| 97 | + <option value="Nacional">Nacional</option> | |
| 85 | 98 | </select> |
| 86 | 99 | </div> |
| 87 | 100 | </div> |
| 88 | - <div class="form-group"> | |
| 89 | - <label class="control-label col-sm-3">Cidade:</label> | |
| 101 | + <div id="input-city-container" class="form-group"> | |
| 102 | + <label class="control-label col-sm-3">Cidade (opcional):</label> | |
| 90 | 103 | <div class="col-sm-5"> |
| 91 | 104 | <input id="input-city" name="cidade" class="form-control" |
| 92 | 105 | placeholder="Nome da sua cidade" type="text"> | ... | ... |