Как пройти проверку формы с помощью Bootstrap?

Question

Я хотел бы знать, как инициировать определенные функции javascript, чтобы сделать ярлык красным или всплывать, говоря пустое поле и т. Д. С загрузочным твиттером.

У меня есть форма, как так:

<form role="myForm" id="sign-up-form" method="post" action="/sign-up"> 
    <div class="form-group"> 
     <label for="exampleInputEmail1">Email</label> 
     <input type="email" class="form-control" id="exampleInputEmail1" name="email"> 
    </div> 
    <div class="form-group"> 
     <label for="exampleInputPassword1">Password</label> 
     <input type="password" class="form-control" id="exampleInputPassword1"> 
    </div> 
    <input type="submit" value="Next: Connect Shopify" class="btn btn-success"> 
    </form> 

У меня есть маршрут, как так:

app.post("/sign-up", function (req, res) { 

    console.log(req.body); 
    res.render('sign-up'); 
}); 

Я хотел бы знать, как обращаться с формы проверки. Например, если пустое пространство, с JavaScript-бутстрапом, я могу сделать его красным или всплывать. Как я могу это сделать?

Answer 1

Чтобы использовать функцию проверки, вы можете использовать событие onChange. Затем смените css на метод .style().

Answer 2

Итак, вот что я получаю от вашего вопроса. Вы хотите функцию JS для

• ввода Validate
• изменение Ui метки
• или добавить всплывающее окно, чтобы предупредить, что пользователь оставил это поле пустым

Все это может быть сделано просто по JavaScript или JQuery.

Если мы следуем шаблону (HTML), указанному в вашем вопросе, то ниже скрипт будет делать то, что вы хотите. Я также добавил необходимые комментарии, чтобы помочь вам.

<input id="submit" type="submit" value="Next: Connect Shopify" class="btn btn-success" onClick="submit()"> 

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

function submit() { 
    if (document.getElementById('exampleInputEmail1') === '' || typeof document.getElementById('exampleInputEmail1') === 'undefined') { 
    document.getElementById('exampleInputEmail1').style.color = 'red'; 
    return; 
    } else if (document.getElementById('exampleInputPassword1') === '' || typeof document.getElementById('exampleInputPassword1') === 'undefined') { 
    document.getElementById('exampleInputEmail1').style.color = 'red'; 
    return; 
    } 
    return; 
} 

Однако я бы предложил вам использовать Jquery для выполнения подобных действий. А также вы можете использовать атрибут required в полях ввода, чтобы убедиться, что пользователь должен что-то добавить в поле.