Validate fields with javascript in Safari browser

Question

I’m having trouble trying to validate form fields, via Javascript, in Safari browser.

The HTML code:

<div class="modal fade" id="remarcar" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
    <div class="modal-content">
        <div id="confirmacao-label1">
            <a href="#close" title="Close" data-dismiss="modal" class="closeModal">X</a>
        </div>
        <div class="modal-body"> 
            <form action="#" method="post" name="remarcar-cancelar" id="remarcar-cancelar">                                  
                <div id="button-label-remarcacao">        
                    <span class="titulos">Por favor nos informe o motivo: </span>
                    <span class="titulos">Motivo: </span>
                    <select name="motivoCancelamento" id="motivoCancelamento" class="combobox-motivo" required="required">
                        <option value=""> </option>
                        <option value="viagem">Viagem</option>
                        <option value="outros">Outros Motivos</option>
                    </select>
                </div>
                <div id="button-label-remarcacao">
                    <button type="submit" name="remarcar" value="remarcar" id="remarcacao-submit" 
                    onclick="return validaMotivoSituacaoSubmit();">Desejo Remarcar</button>
                </div>
            </form>
        </div>
    </div>
</div>

That on the button calls the JS function:

<script>
function validaMotivoSituacaoSubmit() {
    if (document.getElementById("motivoCancelamento").selectedIndex === 0) {
        alert("Escolha uma opção!");
        return false;
    } else {
        $("#remarcar-cancelar").attr("action", "MSAGEN");
        document.forms["remarcar-cancelar"].submit();
        return true;
    }
}
</script>

Validations work perfectly on IE, Firefox, Chrome browsers. However, in Safari, validation does not work and if the user does not select a reason, send empty parameter to Servlet.

Does anyone have any tips?

Answer 1

Try closing the script like this:

HTML:

<div class="modal fade" id="remarcar" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
    <div class="modal-content">
        <div id="confirmacao-label1">
            <a href="#close" title="Close" data-dismiss="modal" class="closeModal">X</a>
        </div>
        <div class="modal-body"> 
            <form action="#" method="post" name="remarcar-cancelar" id="remarcar-cancelar">                                  
                <div id="button-label-remarcacao">        
                    <span class="titulos">Por favor nos informe o motivo: </span>
                    <span class="titulos">Motivo: </span>
                    <select name="motivoCancelamento" id="motivoCancelamento" class="combobox-motivo" required="required">
                        <option value=""> </option>
                        <option value="viagem">Viagem</option>
                        <option value="outros">Outros Motivos</option>
                    </select>
                </div>
                <div id="button-label-remarcacao">
                    <button type="submit" name="remarcar" value="remarcar" id="remarcacao-submit" 
                    onclick="validaMotivoSituacaoSubmit();">Desejo Remarcar</button>
                </div>
            </form>
        </div>
    </div>
</div>

Script:

var validaMotivoSituacaoSubmit = (function () {
    if (document.getElementById("motivoCancelamento").selectedIndex === 0) {
        alert("Escolha uma opção!");
        return false;
    } else {
    var frm = document.forms["remarcar-cancelar"];
        frm.setAttribute("action", "MSAGEN");
        frm.submit();
        return true;
    }
});