验证和jquery日历不会一起工作

时间:2014-08-31 17:53:06

标签: javascript jquery validation

我有一个关于jquery datepicker和javascript验证的问题。它不会在我的页面上一起工作。

以下是页面:

<%@page import="model.Rola"%>
<%@page import="java.util.List"%>
<%@page import="service.RolaService"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Nowy pracownik</title>
<link rel="stylesheet" href="css/main.css">

<style type="text/css">
label.error {
float: none;
color: red;
padding-left: .5em;
vertical-align: top;
}

.ui-datepicker{
    font-size:16px;
    line-height: 0.7;
}
</style>


<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/validate.min.js"></script>
<script type="text/javascript" src="js/validation.js"></script>



<link rel="stylesheet" href="css/kalendarz.css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.ui.core.js"></script>
<script type="text/javascript" src="js/jquery.ui.datepicker.js"></script>
<script type="text/javascript" src="js/pl.js"></script>
<script type="text/javascript" src="js/zegar.js"></script> 


</head>

<body>

<%
    RolaService rolaService = new RolaService();
    List<Rola> listaRoles = rolaService.getAllRoles();
    request.setAttribute("role", listaRoles);
%>

<%@ include file="header.jsp"%>



<div class="webbody">
    <form id="walidacjaformy" method="post" action="nowypracownik.jsp">
        <table>
            <tr>
                <td>Imie</td>
                <td><input type="text" name="imie"></td>
            </tr>
            <tr>
                <td>Nazwisko</td>
                <td><input type="text" name="nazwisko"></td>
            </tr>
            <tr>
                <td>Pensja brutto</td>
                <td><input type="text" name="nowaPensja"></td>
            </tr>
            <tr>
                <td>Rola w systemie</td>
                <td>
                    <select name="rolawsystemie">
                        <c:forEach items="${role}" var="item">
                            <option value="${item.nazwaRoli}"><c:out
                                    value="${item.nazwaRoli}" /></option>
                        </c:forEach>
                    </select>
                </td>
            </tr>
            <tr>
                <td>Login</td>
                <td><input type="text" name="login"></td>
            </tr>
            <tr>
                <td>Haslo</td>
                <td><input type="password" id="haslo" name="haslo"></td>
            </tr>
            <tr>
                <td>Powtórz hasło</td>
                <td><input type="password" id="haslo2" name="haslo2"></td>
            </tr>
            <tr>
                <td>Telefon</td>
                <td><input type="text" name="nrtelefonu" value="0048"></td>
            </tr>
            <tr>
                <td>Data przyjęcia (dd/MM/yyyy)</td>
                <td><input type="text" id="from" name="startdate"></td>
            </tr>
            <tr>
                <td>Adres e-mail</td>
                <td><input type="text" name="email"></td>
            </tr>
            <tr>
                <td>Kraj</td>
                <td><input type="text" name="kraj" value="Polska"></td>
            </tr>
            <tr>
                <td>Kod pocztowy</td>
                <td><input type="text" name="kodpocztowy"></td>
            </tr>
            <tr>
                <td>Miasto</td>
                <td><input type="text" name="miasto"></td>
            </tr>
            <tr>
                <td>Ulica</td>
                <td><input type="text" name="ulica"></td>
            </tr>
            <tr>
                <td>Nr Domu</td>
                <td><input type="text" name="nrdomu"></td>
            </tr>
            <tr>
                <td>Nr mieszkania</td>
                <td><input type="text" name="nrmieszkania"></td>
            </tr>




        </table>
        <table>
            <tr>
                <td><input type="submit" value="Dodaj nowego pracownika" class="submitLink"
                    ></td>
            </tr>
        </table>
    </form>
</div>
</body>
</html>

这是验证(validation.js):

$(function() {
$("#walidacjaformy")
        .validate(
                {
                    rules : {
                        login : {
                            required : true,
                            minlength : 3,
                            maxlength : 30,
                            validateletters : true

                        },
                        imie : {
                            required : true,
                            minlength : 3,
                            maxlength : 30,
                            validateletters : true
                        },
                        nazwisko : {
                            required : true,
                            maxlength : 30,
                            validateletters : true

                        },
                        nrtelefonu : {
                            required : true,
                            minlength : 9,
                            maxlength : 13,
                            validatenumbers : true

                        },
                        email : {
                            required : true,
                            validatemail : true
                        },
                        kraj : {
                            required : true,
                            validateletters : true
                        },
                        kodpocztowy : {
                            required : true,
                            minlength : 6,
                            maxlength : 6,
                            validatekod : true,

                        },
                        miasto : {
                            required : true,
                            validateletters : true
                        },
                        ulica : {
                            required : true,
                            minlength : 3,
                            maxlength : 30,
                            validateletters : true
                        },
                        nrdomu : {
                            required : true,
                            minlength : 1,
                            maxlength : 5
                        },

                        nowaPensja : {
                            required : true,
                            validatepensja : true
                        },
                        startdate : {
                            required : true,
                            validacjadata: true

                        },
                        haslo : {
                            required : true,

                        },
                        haslo2 : {
                            required : true,
                            equalTo : "#haslo"

                        },
                        rolawsystemie : {
                            required : true,

                        },

                    },
                    messages : {
                        login : {
                            required : "To pole jest wymagane!",
                            minlength : $
                                    .format("Minimalna wartość nie została osiągnięta"),
                            maxlength : $.format("Zbyt duża wartość!")

                        },
                        imie : {
                            required : "To pole jest wymagane!",
                            minlength : $
                                    .format("Minimalna wartość nie została osiągnięta"),
                            maxlength : $.format("Zbyt duża wartość!")
                        },
                        nazwisko : {
                            required : "To pole jest wymagane!",
                            maxlength : $.format("Zbyt duża wartość!")
                        },
                        nrtelefonu : {
                            required : "To pole jest wymagane!",
                            minlength : $
                                    .format("Minimalna wartość nie została osiągnięta"),
                            maxlength : $.format("Zbyt duża wartość!")
                        },
                        email : {
                            required : "To pole jest wymagane!"
                        },
                        kraj : {
                            required : "To pole jest wymagane!"
                        },
                        kodpocztowy : {
                            required : "To pole jest wymagane!",
                            minlength : $
                                    .format("Kod pocztowy ma 6 znaków"),
                            maxlength : $
                                    .format("Kod pocztowy ma 6 znaków")
                        },

                        miasto : {
                            required : "To pole jest wymagane!"
                        },
                        ulica : {
                            required : "To pole jest wymagane!",
                            minlength : $.format("Zbyt mało znaków!"),
                            maxlength : $.format("Zbyt dużo znaków!")
                        },
                        nrdomu : {
                            required : "To pole jest wymagane!",
                            minlength : $.format("Zbyt mało znaków!"),
                            maxlength : $.format("Zbyt dużo znaków!")

                        },
                        nowaPensja : {
                            required : "To pole jest wymagane!"
                        },
                        startdate : {
                            required : "To pole jest wymagane!"

                        },
                        haslo : {
                            required : "To pole jest wymagane!"

                        },
                        haslo2 : {
                            required : "To pole jest wymagane!",
                            equalTo : "Hasła nie mają tej samej wartości!"

                        },
                        rolawsystemie : {
                            required : "To pole jest wymagane!",
                        },

                    }
                });

$.validator.addMethod("validatekod", function(value, element) {
    // return /^\d+$/.test(value);
    return /^[0-9]{2}-[0-9]{3}$/.test(value);
}, "Kod pocztowy ma format xx-xxx i składa się jedynie z cyfr.");
;

$.validator.addMethod("validatenumbers", function(value, element) {
    return /^\d+$/.test(value);

}, "To pole może składać się jedynie z cyfr.");
;

/*  $.validator.addMethod("validatemail", function(value, element) {
    return /^[a-zA-Z0-9._-]+@[a-zA-Z0-9-]+\.[a-zA-Z.]{2,5}$/.test(value);
}, "Niepoprawny adres e-mail.");
;*/

$.validator.addMethod("validatemail", function(value, element) {
    return /^[a-zA-Z0-9._-]+@[a-zA-Z0-9-]+\.[a-zA-Z.]{2,7}$/.test(value);
}, "Niepoprawny adres e-mail.");
;

$.validator.addMethod("validateletters", function(value, element) {
    return /^[A-ZÓŻŹĘĄŁĆa-zóżźęąłć\s]+$/.test(value);
}, "Niepoprawny format tego pola.");
;

$.validator.addMethod("validatepensja", function(value, element) {
    return /^([1-9][0-9]+(\.[0-9]{0,2})?)+$/.test(value);

}, "To pole może składać się jedynie z cyfr.");
;
$.validator.addMethod("validacjadata", function(value, element) {
    return /^([0-9]{2})\/([0-9]{2})\/([0-9]{4})$/.test(value);
}, "Zły format daty.");
;
});

这是datepicker(zegar.js):

   $(function() {
$( "#from" ).datepicker({
  changeYear: false,
  yearRange: "c-0:c+1",
  showButtonPanel: true,
  dateFormat: 'dd/mm/yy',
  firstDay: 1,
  defaultDate: "",
  minDate: 0,
  changeMonth: true,
  numberOfMonths: 1,
  onClose: function( selectedDate ) {
    $( "#to" ).datepicker( "option", "minDate", selectedDate );
  }
}
);
$( "#to" ).datepicker({
  changeYear: false,
  yearRange: "c-0:c+1",
  showButtonPanel: true,
  dateFormat: 'dd/mm/yy',
  firstDay: 1,
  defaultDate: "",
  minDate: 1,
  changeMonth: true,
  numberOfMonths: 1,
  onClose: function( selectedDate ) {
    $( "#from" ).datepicker( "option", "maxDate", selectedDate );
  }
});
});

如前所述,这两个功能并不一致。任何想法如何解决它?

0 个答案:

没有答案