Как проверить несколько полей ввода одновременно

Я хотел бы использовать плагин проверки jQuery по нескольким причинам.

Вы подтвердили, хорошо, теперь что? Вам нужно отобразить ошибку, удалить ее, когда она действительна, показывая, сколько всего ошибок может быть? Есть много вещей, которые он может вам пригодиться, не нужно изобретать колесо.

Кроме того, еще одно огромное преимущество - это размещение на CDN, текущая версия на момент ответа может быть найденный здесь: http://www.asp.net/ajaxLibrary/CDNjQueryValidate16.ashx Это означает более быстрое время загрузки для клиента.

0
задан Udhay Titus 17 January 2019 в 11:31
поделиться

4 ответа

Пожалуйста, попробуйте это.

    var _validFileExtensions = [".jpg", ".jpeg", ".bmp", ".gif", ".png"];    
    function ValidateSingleInput(oInput) {
      if (oInput.type == "file") {
       var sFileName = oInput.value;
       if (sFileName.length > 0) {
        var blnValid = false;
        for (var j = 0; j < _validFileExtensions.length; j++) {
            var sCurExtension = _validFileExtensions[j];
            if (sFileName.substr(sFileName.length - sCurExtension.length, sCurExtension.length).toLowerCase() == sCurExtension.toLowerCase()) {
                blnValid = true;
                break;
            }
        }
         
        if (!blnValid) {
            alert("Sorry, " + sFileName + " is invalid, allowed extensions are: " + _validFileExtensions.join(", "));
            oInput.value = "";
            return false;
        }
    }
}
return true;
}
   File 1: <input type="file" name="file1" onchange="ValidateSingleInput(this);" /><br />
   File 2: <input type="file" name="file2" onchange="ValidateSingleInput(this);" /><br />
   File 3: <input type="file" name="file3" onchange="ValidateSingleInput(this);" /><br />

0
ответ дан Ankur Shah 17 January 2019 в 11:31
поделиться

используйте счетчик, чтобы увидеть, есть ли у вас больше ошибок:

var counter= 0;
function validate(fName){

    splitName = fName.split(".");
    fileType = splitName[1];
    fileType = fileType.toLowerCase();
    if (fileType != 'jpg' &&  fileType != 'jpeg' && fileType != 'png'){
      alert("You must select a .jpg or .png, file.");
      counter = counter + 1;
    }
    if (counter !=0){
        document.getElementById("uploadbutton").className = "hide";
    }else{
        document.getElementById("uploadbutton").className = "fwdbutton upload";
    }
}

каждый раз, когда вы запускаете функцию, она проверяет, есть ли у вас ошибка. В противном случае этот код является примером и не обрабатывается, если вы исправите ранее отмеченную ошибку.

Мой совет - перепроектировать код, чтобы проверять каждый вход один раз при нажатии кнопки и вызывать оповещение о представлении. Вместо этого это усложняет вещи. Поэтому оставляйте кнопку всегда видимой и запускайте функцию при нажатии кнопки UploadButton

.
0
ответ дан Lelio Faieta 17 January 2019 в 11:31
поделиться

Вы можете использовать следующее регулярное выражение для проверки допустимости файла.

/\.(jpe*g|png)$/gi

И затем вы можете использовать метод test(), чтобы проверить, является ли файл действительным в вашем операторе if.

if(/\.(jpe?g|png)$/gi.test(s)) {
  //TODO
}
0
ответ дан Seniru Pasan 17 January 2019 в 11:31
поделиться

Надеюсь, это поможет вам. Кнопка загрузки изначально скрыта, когда выбраны все действительные файлы, вы увидите кнопку загрузки, и любой недействительный тип выдаст вам предупреждение.

 var isValid = [0];
    var sumTotal=0;
    function validate(fileNo){
        var files = event.target.files;
        var filetype = files[0].type;
        if (filetype == 'image/jpeg' ||  filetype == 'image/jpeg' || filetype == 'image/png'){
            isValid[fileNo]=1;
        }else{
            alert("You must select a .jpg or .png, file.");
            isValid[fileNo]=0;
        }
        sumTotal = isValid.reduce(function(a, b) { return a + b; }, 0);
        if(sumTotal==5){
            document.getElementById("uploadbutton").style.display="block";
        }else{
            document.getElementById("uploadbutton").style.display="none";
        }
    }
<div id="upload">
    <h2>If possible, please could you include photographs of the following:</h2>

    <p><label for='uploaded_file1'>Current boiler:</label> <input type="file" name="uploaded_file1" id="uploaded_file1" class="uploadfields"  onChange="validate(1)"><a href="#" class="clearfile" id="clear1">X</a></p>

    <p><label for='uploaded_file2'>Gas meter:</label> <input type="file" name="uploaded_file2" id="uploaded_file2" class="uploadfields"  onChange="validate(2)"><a href="#" class="clearfile" id="clear2">X</a></p>

    <p><label for='uploaded_file3'>Boiler pipe work:</label> <input type="file" name="uploaded_file3" id="uploaded_file3" class="uploadfields"  onChange="validate(3)"><a href="#" class="clearfile" id="clear3">X</a></p>

    <p><label for='uploaded_file4'>Outside flue:</label> <input type="file" name="uploaded_file4" id="uploaded_file4" class="uploadfields"  onChange="validate(4)"><a href="#" class="clearfile" id="clear4">X</a></p>

    <p><label for='uploaded_file5'>Anything else relevant:</label> <input type="file" name="uploaded_file5" id="uploaded_file5" class="uploadfields"  onChange="validate(5)"><a href="#" class="clearfile" id="clear5">X</a></p><br />

    <input class="backbutton showmoved" type="button" value="<< back" /> <input class="fwdbutton upload" style="display: none;" id="uploadbutton" type="button" value="upload >>" />

    <p><a class="nophotos" id="nophotos">I have no photos &gt;&gt;</a></p>
</div>

0
ответ дан InterviewSortout 17 January 2019 в 11:31
поделиться
Другие вопросы по тегам:

Похожие вопросы: