Event On Blazor Button

Gleydson 0
Viewed 51

I'm learning about blazor and c# and i was wondering, how do i leave the button disabled when file type input is null? That is, it will be active when it has files in it.

This is my @page code

@page "/VerificarConta"


<h1>Verificar conta</h1>
    
<form class="mt-5" enctype="multipart/form-data">
    
    <div class="mb-3">        
        <label for="Identificacao" class="px-1">Documento de identificação</label>
        <input class="form-control" type="file" id="Identificacao" required/>       
    </div>
    
    <div class="mb-3">
        <label for="Selfie">Selfie com documento de identificação</label>
        <input class="form-control" type="file" id="Selfie" required />
    </div>
    
    <div class="mb-3">
        <label for="Endereco">Comprovante de residência (3 ultimos)</label>
        <input class="form-control" type="file" id="Endereco" required>
    </div>
 
    <div class="mb-3">
        <label for="Renda">Comprovante de capacidade financeira</label>
        <input class="form-control" type="file" id="Renda" required>
        <InputFile OnChange="@ArquivoSelecionado"></InputFile>
    </div>
    
    <button class="btn btn-primary" type="submit">Enviar Documentos</button>

</form>


@code {
    
    
}
blazor button validation c#
2 Answers

Have a bool which represents the state of the button (disabled or enabled). This bool should then be switched to true / false, whenever there is more than 1 file added when the @onchange event gets fired.

The code is as follows:

@page "/"

<PageTitle>Index</PageTitle>


<h1>Verificar conta</h1>
    
<form class="mt-5" enctype="multipart/form-data">
    
    <div class="mb-3">        
        <label for="Identificacao" class="px-1">Documento de identificação</label>
        <input class="form-control" type="file" id="Identificacao" required/>       
    </div>
    
    <div class="mb-3">
        <label for="Selfie">Selfie com documento de identificação</label>
        <input class="form-control" type="file" id="Selfie" required />
    </div>
    
    <div class="mb-3">
        <label for="Endereco">Comprovante de residência (3 ultimos)</label>
        <input class="form-control" type="file" id="Endereco" required>
    </div>
 
    <div class="mb-3">
        <label for="Renda">Comprovante de capacidade financeira</label>
        <input class="form-control" type="file" id="Renda" required>
        <InputFile OnChange="@InputFileOnChange"></InputFile>
    </div>
    
    <button class="btn btn-primary" disabled="@(_lockButton)" type="submit">Enviar Documentos</button>

</form>

@code{
    private bool _lockButton = true;

    private async Task InputFileOnChange(InputFileChangeEventArgs args) 
    {
        _lockButton = (args.FileCount > 0) ? false : true;
    }
}

The following code, does not contain any specific checks, only if more than 0 files were included. Other checks are up to you to include. Furthermore, only 1 input was validated, but it works as a proof of concept.

IAmDrNoLIfe0

You would have to use javascript to watch for the input class to change, and then enable to submit button to be clicked.

See following: https://jsfiddle.net/ktvzsa8n/

HTML

<input id="submit" name="submit" type="submit" value="send" disabled="disabled">

<input id="file_submit" name="file_submit" type="file" value="" onchange="EnableSend();">

Javascript:

function EnableSend() {
        document.getElementById("submit").disabled = false;
}
Anthony Saleeb0
Related